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の異常な機能を示している可能性が高いです。