CSSで作るフラットなアイコンセット

CSS3から丸角用のプロパティ(radius)や傾きを付けれるプロパティ(transform)などが実装されたため、今まで画像として作成していた複雑な形がCSSで作れるようになりました。
今回は、CSS3がどこまで画像の代わりなるか?出来る限りいろいろな形の30種類のアイコンを作成してみましたので紹介します。
CSSで作るアイコン
CSSアイコンセット30種
CSSアイコンの作り方
数が多いため、アイコンのCSS一覧はzipファイル化しました。必要な方は以下からダウンロードしてください。
サンプルとしてこのアイコンを作成するソースを載せておきます。他のアイコンも同じようにspanタグ一つで作成できるようになっています。
HTML
<span class="icon icon1"></span>
CSS
/* iconの共通CSS */ .icon{ display:inline-block; position:relative; background: #999; border-radius:90px; width:90px; height:90px; margin:5px; } .icon:hover{ opacity: 0.8; } /* ライト */ .icon1:before{ content:''; display:block; position:absolute; top:20px; left:30px; border-radius:30px; height:30px; width:30px; background-color:#fff; } .icon1:after{ content:''; display:block; position:absolute; top:56px; left:37px; height:5px; width:16px; border-top:4px solid #fff; border-bottom:4px solid #fff; }
Related Posts

Trackback URL
http://webnonotes.com/css/cssicon/trackback/No Comments Yet