2012 . 11 . 30
design

CSSだけで組み立てられたアイコンを公開しているサイト『One div』

『One div』は純粋にCSSだけで組み立てられたさまざまのアイコンを公開しているサイト。

各アイコンの下にあるボタンをクリックすると、アイコンを表示させるためのHTMLやCSSの内容が表示され、これらのデータをファイルとしてダウンロードすることも可能です。

実際、下のアイコンは画像ではなく空の<div>を下のCSSでアイコンとして描画しています。


.fish {
width: 2.1em;
    height: 2.1em;
    position: relative;
    border-radius: 1.5em 0em 1.5em 0em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #2C2C2C;
}
.fish::before {
    position: absolute;
    content: "";
    top: 1.8em;
    right: 1.4em;
    width: 0.3em;
    height: 0em;
    border-bottom: 0.5em solid #2C2C2C;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.fish::after {
    left: 0.92em;
    top: 0.18em;
    position: absolute;
    content: "";
    background-color: white;
    font-weight: bold;
    font-size: 1.5em;
    height: 0.2em;
    width: 0.2em;
    border-radius: 0.1em;
    -webkit-box-shadow: 0.15em -0.7em 0.05em 0.02em #2C2C2C, -0.1em -1.2em 0.05em 0.06em #2C2C2C;
    box-shadow: 0.15em -0.7em 0.05em 0.02em #2C2C2C, -0.1em -1.2em 0.05em 0.06em #2C2C2C;
}

さて、こういった試みは以前からあり、メリットとしては静的な画像ではないでので色の指定や完全なリサイズができるというところにありますが、その代り冗長なコードを書かなくてはいけないことを考えると、他の例えばアイコンフォントを使った手法などの方がむしろスマートで実用的と考える方も多いと思います。


こちらのサイトの本質は“実用的なアイコン配布サイト”というより、どちらかというとCSSハック的な技を披露する場といった方がいいかもしれません。

One div