サービスを作っている時に、システムページに必要な画像って結構たくさんあるんですよね。
HTMLに準拠するボタンや入力フォームなども、今時はちゃんとデザインされた表示にしないと、とても古臭いイメージのページになって、システム全体のクオリティが低く感じてしまいます。
そこで毎回無料アイコン検索を行って対応していたんですが、知り合いのデザイナーからは「今時はSVGでしょ」とか言われるんですが、ここでは、CSSに焦点を絞って行います。
※SVGは今後シリーズ化したいと思います。
HUMANアイコン
TwitterやFacebookなど、SNSでは、自分のプロフィール画像を写真で撮ってアップロードしている人が多いのですが、デフォルト状態では、簡素な人影イメージになっているのをよく見ます。
・・・・こんなんや・・・・
このようなHUMANアイコンです。
CSSでセットしておくと、クラス名を付けるだけでいいので、扱いやすいと思います。
「画像もいいけど、CSSもね！」
ソースコード
<style>
.human{
position:relative;
display:inline-block;
width:64px;
height:64px;
border:0;
background-color:#E2E7EA;
border-radius:32px;
margin:0;
padding:0;
overflow:hidden;
}
.human:before{
content:"";
position:absolute;
display:inline-block;
top:10px;
left:16px;
width:32px;
height:32px;
border:0;
margin:0;
padding:0;
background-color:#939EA7;
border-radius:16px;
}
.human:after{
content:"";
position:absolute;
display:inline-block;
top:44px;
left:6px;
width:52px;
height:52px;
border:0;
margin:0;
padding:0;
background-color:#939EA7;
border-radius:24px;
}
</style>
カスタマイズポイント
widthとheightを変更する際は、内部パーツのleftとtopも、ずらしてあげましょう。
background-colorや人物部分のカラーは、好きに変更しても影響ないでしょう。
.humanのpositionをabsoluteにすると、絶対座標で設置できますよ。（その際はtop,leftで座標を追加してください）
プレビュー
非常に簡素だったので、マウスオーバーで背景色を変えてみました。
お試しあれ！
各種リンク
ちなみに、この記事の前回記事は以下です。
CSSでアイコン描画「closeボタン」
アイコン検索サイト
IconFinder
テーマやテイストなどでまとめてDLすることもできるし、クオリティも悪くない。
SVGデータもDLできるという優れたサイトですが、日本語検索ができないのが少しだけイタイです。
英語でいいだろって？その通りです・・・
