CSS3で梅アイコンを作ってみました(サンプルコードあり)

CSS3の機能を使ってボタンやアイコンを作成する事が可能です。今まで画像で対応していた事がCSSできると修正も楽になりますね。
今回は梅アイコンを作ってみました。一つ自分で作ってみると「あーなるほど！」「この形を組み合わせるとこの形が作れるな・・」と広がりがあって面白いです。

CSS3で自作アイコンに興味がある人の参考になれば幸いです。

こんな手順でCSS3アイコンを作ってみました。

作ったアイコンはこんな感じ

うーん。一部ラインが出てますね・・・まだ完全とは言えないようですが、以下に梅アイコンの出来るまでを載せたいと思います。
※IEは9以下だと表示されません。IEで表示させる為には「 CSS3 Pie」などを導入して調整する必要があります。

Photoshopでアイコンのイメージを作る

全体のバランスや各パーツのサイズを把握する為にPhotoshopで最初にイメージを作りました。これを書き出してそのままアイコンに使えばいいんじゃ・・・と突っ込まれそうですが、CSSで作る事が目的なのでご了承を。
私は小さいと分かりづらいので、実際に使用したいサイズより大きめに作りました。

画像を基にCSS3でアイコンを作る

梅アイコンは2色で、円形のみ使用しています。画像を見ながら色を変更したり、バランス調整しました。まず、花びらを作ってから雄蕊を上に乗せています。

HTMLはこんなにシンプル。

<div class="ume"></div>

1	<div class="ume"></div>

CSS

.ume{
    list-style-type:none;
    padding: 0 15px 0 12px;
　　　margin:10px 0 10px 10px;
	width:33px;
	height:30px;
	top:-8px;
    position:relative;
}

.ume:before{
/****花弁の作成****/
    content:"";
    display: block;   	
    border: solid 6px #aa4c8f;
    border-radius: 100%;
    -moz-border-radius:100%;
    -webkit-border-radius: 100%;
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: -10px 6px 0 0 #aa4c8f,10px 6px 0 0 #aa4c8f, -6px 16px 0 0 #aa4c8f, 6px 16px 0 0 #aa4c8f, 0px 8.5px 0 0 #aa4c8f;
}
 .ume:after{
/****雄蕊の作成****/
    z-index: 1;
    content:"";
    display:block;
    border: solid 1px #ffffff;
    border-radius: 100%;
    -moz-border-radius:100%;
    -webkit-border-radius: 100%;
    position:absolute;
    left: 5px;
    top: 11px;
    box-shadow:-5px 3px 0 0 #ffffff,5px 3px 0 0 #ffffff, -3px 7px 0 0 #ffffff, 3px 7px 0 0 #ffffff;
}

.ume{

list-style-type:none;

padding: 0 15px 0 12px;

　　　margin:10px 0 10px 10px;

width:33px;

height:30px;

top:-8px;

position:relative;

}

.ume:before{

/****花弁の作成****/

content:"";

display: block;

border: solid 6px #aa4c8f;

border-radius: 100%;

-moz-border-radius:100%;

-webkit-border-radius: 100%;

position: absolute;

left: 0;

top: 0;

box-shadow: -10px 6px 0 0 #aa4c8f,10px 6px 0 0 #aa4c8f, -6px 16px 0 0 #aa4c8f, 6px 16px 0 0 #aa4c8f, 0px 8.5px 0 0 #aa4c8f;

}

.ume:after{

/****雄蕊の作成****/

z-index: 1;

content:"";

display:block;

border: solid 1px #ffffff;

border-radius: 100%;

-moz-border-radius:100%;

-webkit-border-radius: 100%;

position:absolute;

left: 5px;

top: 11px;

box-shadow:-5px 3px 0 0 #ffffff,5px 3px 0 0 #ffffff, -3px 7px 0 0 #ffffff, 3px 7px 0 0 #ffffff;

}

解説

擬似要素（:before :after）を使えばコンテンツの前後に装飾を入れる事ができます。これを利用してumeクラスに花弁（:beforeで指定）と雄蕊（:afterで指定）を作っています。ちなみにCSS3ではコロン二つの::beforeと記述するのが正しいのですが、ブラウザ対応状況が不安なので、コロン1つで記述しています。
umeクラスにbox-shadowを付けて花弁を作ることも可能です。しかし、リストアイコンにしたい場合、それだと崩れてしまうのでご注意下さい。
擬似要素についてはこちらに分かりやすく説明がありました。

なにかと便利な「:before, :after擬似要素」の使い方を基本からマスターするためのチュートリアル</a></li>
<li>
<a class="t_blank" href="http://blog.3streamer.net/html5-css3/pseudo-elements-and-pesudo-classes-530/"> CSSの疑似要素と疑似クラスをもう一度最初から</a></li>
</ul>
<h4>花弁の作成について</h4>
花弁について詳しく見ていきましょう。
[css highlight="5,6,13"]
.ume:before{
/****花弁の作成****/
    content:"";
    display: block;   	
    border: solid 6px #aa4c8f;
    border-radius: 100%;
    -moz-border-radius:100%;
    -webkit-border-radius: 100%;
    position: absolute;
    left: 0;
    top: 0;
/*x,y座標を調整しながら残り4枚の花弁を作っています*/
    box-shadow: -10px 6px 0 0 #aa4c8f,10px 6px 0 0 #aa4c8f, -6px 16px 0 0 #aa4c8f, 6px 16px 0 0 #aa4c8f, 0px 8.5px 0 0 #aa4c8f;
}

なにかと便利な「:before, :after擬似要素」の使い方を基本からマスターするためのチュートリアル</a></li>

<li>

<a class="t_blank" href="http://blog.3streamer.net/html5-css3/pseudo-elements-and-pesudo-classes-530/"> CSSの疑似要素と疑似クラスをもう一度最初から</a></li>

</ul>

<h4>花弁の作成について</h4>

花弁について詳しく見ていきましょう。

[css highlight="5,6,13"]

border: solid 6px #aa4c8f;

border-radius: 100%;

-moz-border-radius:100%;

-webkit-border-radius: 100%;

position: absolute;

left: 0;

top: 0;

/*x,y座標を調整しながら残り4枚の花弁を作っています*/

box-shadow: -10px 6px 0 0 #aa4c8f,10px 6px 0 0 #aa4c8f, -6px 16px 0 0 #aa4c8f, 6px 16px 0 0 #aa4c8f, 0px 8.5px 0 0 #aa4c8f;

}

5行目のborderで花弁1枚の大きさを指定しています。アイコンのサイズを変えたい時は、この数値を編集します。そして6行目のborder-radiusで円形にしています。これで基準となる花弁ができました。
12行目のbox-shadowで花弁を複製します。box-shadowは影をつける為のものですが、ぼかしを0にすれば複数の花弁を作れます。

box-shadowを使った装飾について、こちらが参考になります。

[CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)

雄蕊の作成について

続いて雄蕊について。要領は花弁と同じです。

 .ume:after{
/****雄蕊の作成****/
    z-index: 1;
    content:"";
    display:block;
    border: solid 1px #ffffff;
    border-radius: 100%;
    -moz-border-radius:100%;
    -webkit-border-radius: 100%;
    position:absolute;
    left: 5px;
    top: 11px;
    box-shadow:-5px 3px 0 0 #ffffff,5px 3px 0 0 #ffffff, -3px 7px 0 0 #ffffff, 3px 7px 0 0 #ffffff;
}

.ume:after{

/****雄蕊の作成****/

z-index: 1;

content:"";

display:block;

border: solid 1px #ffffff;

border-radius: 100%;

-moz-border-radius:100%;

-webkit-border-radius: 100%;

position:absolute;

left: 5px;

top: 11px;

box-shadow:-5px 3px 0 0 #ffffff,5px 3px 0 0 #ffffff, -3px 7px 0 0 #ffffff, 3px 7px 0 0 #ffffff;

}

6行目のborderで雄蕊1本の大きさを指定しています。サイズを変えたい時は、この数値を編集します。そして7行目のborder-radiusで円形にしています。花弁と同じですね。
13行目のbox-shadowで雄蕊を複製します。x座標、y座標の位置はプレビューしながら微調整しました。z-indexで重なりを最前面に指定しています。

参考サイト：CSS3で作られたアイコンが多数あります。One Div

リストアイコンに指定する

アイコン単体よりリストの方が使いやすそうなので、リストに設定してみました。

これはサンプルです。
これはサンプルです。
これはサンプルです。

html

<ul class="ume_list">
<li>これはサンプルです。</li>
<li>これはサンプルです。</li>
<li>これはサンプルです。</li>
</ul>

<li>これはサンプルです。</li>

</ul>

CSS

ul.ume_list li{
    list-style-type:none;
    padding: 0 0 0 25px;
    position:relative;
    margin-bottom:10px;
}

ul.ume_list li:before{
/****花弁の作成****/
    content:"";
    display: block;
    border: solid 6px #aa4c8f;
    border-radius: 100%;
    -moz-border-radius:100%;
    -webkit-border-radius: 100%;
    height: 0;
    width: 0;
    position: absolute;
/*花弁の表示位置の指定（文字サイズによって要微調整）*/
    left: 7px;
    top: -3px;
    box-shadow: -10px 6px 0 0 #aa4c8f,10px 6px 0 0 #aa4c8f, -6px 16px 0 0 #aa4c8f, 6px 16px 0 0 #aa4c8f, 0px 8.5px 0 0 #aa4c8f;
}
 
ul.ume_list li:after{
/****雄蕊の作成****/
    z-index: 1;
    content:"";
    display:block;
    width: 0;
    height: 0;
    border: solid #fff;
    border: solid 1px #ffffff;
    border-radius: 100%;
    -moz-border-radius:100%;
    -webkit-border-radius: 100%;
    position:absolute;
/*雄蕊の表示位置の指定（文字サイズによって要微調整）*/
    left: 12px;
    top: 7px;
    box-shadow:-5px 3px 0 0 #ffffff,5px 3px 0 0 #ffffff, -3px 7px 0 0 #ffffff, 3px 7px 0 0 #ffffff;
}

ul.ume_list li{

list-style-type:none;

padding: 0 0 0 25px;

position:relative;

margin-bottom:10px;

}

ul.ume_list li:before{

/****花弁の作成****/

content:"";

display: block;

border: solid 6px #aa4c8f;

border-radius: 100%;

-moz-border-radius:100%;

-webkit-border-radius: 100%;

height: 0;

width: 0;

position: absolute;

/*花弁の表示位置の指定（文字サイズによって要微調整）*/

left: 7px;

top: -3px;

box-shadow: -10px 6px 0 0 #aa4c8f,10px 6px 0 0 #aa4c8f, -6px 16px 0 0 #aa4c8f, 6px 16px 0 0 #aa4c8f, 0px 8.5px 0 0 #aa4c8f;

}

ul.ume_list li:after{

/****雄蕊の作成****/

z-index: 1;

content:"";

display:block;

width: 0;

height: 0;

border: solid #fff;

border: solid 1px #ffffff;

border-radius: 100%;

-moz-border-radius:100%;

-webkit-border-radius: 100%;

position:absolute;

/*雄蕊の表示位置の指定（文字サイズによって要微調整）*/

left: 12px;

top: 7px;

box-shadow:-5px 3px 0 0 #ffffff,5px 3px 0 0 #ffffff, -3px 7px 0 0 #ffffff, 3px 7px 0 0 #ffffff;

}

解説

リストにする場合、テキストとのバランスを整える必要があります。上記コードのハイライトを入れた部分がアイコンの表示位置の指定になります。バランスが悪い場合は、ここで位置を微調整してください。テキストサイズが小さい場合は、アイコンそのものを小さくする必要があります。その場合は、花弁のborderも小さくしてください。