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

CSS3から丸角用のプロパティ(radius)や傾きを付けれるプロパティ(transform)などが実装されたため、今まで画像として作成していた複雑な形がCSSで作れるようになりました。

今回は、CSS3がどこまで画像の代わりなるか?出来る限りいろいろな形の30種類のアイコンを作成してみましたので紹介します。

CSSで作るアイコン
  1. CSSアイコンセット30種
  2. 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;
}
divider

Trackback URL

http://webnonotes.com/css/cssicon/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>