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


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


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

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

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

スポンサーリンク

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

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

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

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

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

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

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

HTMLはこんなにシンプル。

CSS

解説

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



Be the first to comment

Leave a Reply

Your email address will not be published.


*


CAPTCHA