CSSアイコン...">

1つのDiv:CSSアイコン





One-div.comは、CSSを使用して実装された60個近くのアイコンを持つ珍しいサービスです。 HTMLは単一のdivを使用します(そのため名前):



<div class="histogram"> </div>
      
      







CSSアイコンはより複雑です:



 .histogram{ height: 4em; overflow-y:hidden; background:transparent; font-size:10px; } .histogram:before{ content: ""; display: block; width: 0; height: 3em; box-shadow: 1em 2.5em 0 0.3em #2c2c2c, 1.7em 2em 0 0.3em #2c2c2c,2.4em 0.8em 0 0.3em #2c2c2c,3.1em 1.5em 0 0.3em #2c2c2c; } .histogram:after{ content: ""; display: block; position: relative; margin-top: 0.9em; width: 4em; height: 0.1em; background: #2c2c2c; }
      
      







brazoraとの互換性が示されています:







品質を損なうことなくアイコンを拡大縮小できます。







また、ホバーでアニメーション化することもできます-about ページの例。 アイコンのセットは常に更新されます。



明らかに、このサービスは実用的なアイコンセットを提供するよりもCSS3の異常な機能を示している可能性が高いです。



All Articles