CSSで作るアイコン

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

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

CSSで作るアイコン

CSSアイコンセット30種
CSSアイコンの作り方

CSSアイコンセット30種

CSSアイコンの作り方

数が多いため、アイコンのCSS一覧はzipファイル化しました。必要な方は以下からダウンロードしてください。

CSSアイコンセット

サンプルとしてこのアイコンを作成するソースを載せておきます。他のアイコンも同じように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;
}