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

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

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

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

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

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

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

CSS3で表示されたアイコン

CSS3で表示されたアイコン

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

Pocket詳解HTML5&CSS3辞典

著者/訳者:大藤 幹

出版社:秀和システム( 2010-08-23 )

定価:

単行本 ( 279 ページ )

ISBN-10 : 4798027081

ISBN-13 : 9784798027081