CSS伝道師、ユゲタです。
アイコン画像に命を書けているデザイナー諸君、まだ、PNGやGIF制作に消耗しているのかね？
マウスオーバーアクションや、クリックアクション、アクティブや非アクティブの画像を複数のファイルで用意して、ファイル切り替えで対応するなんて、もはや時代遅れ。
これからは、シンプルなアイコンであれば、HTMLタグひとつで、設置実装可能なんですよ。
タグアイコン実装方法
基本的にCSSのclip-pathを使って実装します。
display:inline-block;の状態で、正方形のエレメントの表示部分を、polygon形式の座標指定で、形でくり抜く方式です。
色は背景色を単色でコントロールするので、アイコンはカラフルなものは不向きです。
ただし、デザインによっては、グラデーションなどを使うことで、面白いアイコンも作れるかもしれません。
画像っぽくインラインで扱えるので、文章中などに入れ込むアイコンフォントみたいな使い方も可能です。
全てCSSで構成してあるので、::beforeや::afterなどの疑似要素を使ったり、:hoverなどのイベントと組み合わせることで、webページで効果的な表現もできちゃいます。
CLIP-PATHのブラウザ対応状況
IEだけ対応してないけど、オワコンなんで、考えなくてヨシです。
サンプルアイコン集
よく使うアイコンを作っておきました。
コピペしてお使いくだされ。
独自ポイントとしては、iconというタグを作ってそれにセットをしています。
共通CSSは、個別に変更して書いてもいいし、全体共通でセットしても構いません。
共通css
icon{
display:inline-block;
width:2.0em;
height:2.0em;
background-color:black;
vertical-align:middle;
}
左矢印
icon.left-arrow{
clip-path:polygon(95% 40%, 50% 40%, 50% 10%, 5% 50%, 50% 90%, 50% 60%, 95% 60%);
}
右矢印
icon.right-arrow{
clip-path:polygon(5% 40%, 50% 40%, 50% 10%, 95% 50%, 50% 90%, 50% 60%, 5% 60%);
}
Home
icon.home{
clip-path:polygon(50% 5%, 90% 38%, 90% 95%, 10% 95%, 10% 38%);
}
File
icon.file{
clip-path:polygon(10% 5%, 60% 5%, 90% 40%, 85% 30%, 60% 30%, 60% 10%, 55% 10%, 55% 35%, 85% 35%, 85% 30%, 90% 40%,90% 95%, 10% 95%);
}
Folder
icon.folder{
clip-path:polygon(5% 95%, 95% 95%, 96% 30%, 60% 30%, 50% 15%, 5% 15%);
}
