画像を使わずにCSS3だけで84個のアイコンを表現

　以前、CSS3で棒人間を書いてみるという記事を書きました。これはCSS3の新機能であるドロップシャドウや角丸を利用することでこんなことができるということで紹介させて頂きました。

　今日はそのCSS3を利用することでWeb上で使用されるアイコンが作れる紹介です。Web用のアイコンはWeb上でいろいろと紹介されていて、私もちょっと気になる物があるとすぐにブックマークし、その内、当サイトで紹介させてもらおうと思っているのですが、あまりにも多すぎてどうしようかと思っているのが正直です。

　けど、CSSでこの様なアイコンが作れてしまうならわざわざお絵かきソフトで作る必要もないですね。興味がある方は下記を参照ください。

　CSS3でアイコンが書けることを説明しているのはこちらのサイト。

Pure CSS GUI icons (experimental) – Nicolas Gallagher – Blog & Ephemera

　こちらのサイトのデモページを参照するとソースなども見ることができます。

　ちなみにIEで見るとIE6と7では表示されなくて、IE8だと崩れた状態で表示されます。まだ、サポートされていないので仕方がないですね。もし、IEしかないという人のためにも下記にスクリーンショットを貼っておきます。

CSS3で表示されたアイコン

　それにしても、CSSでこの様なアイコンが作れるというのもすごいものですね～(≧◇≦)