CSSでアイコン描画「HUMANアイコン」

shadow-198682_1280
LINEで送る
Share on GREE
Share on LinkedIn

サービスを作っている時に、システムページに必要な画像って結構たくさんあるんですよね。
HTMLに準拠するボタンや入力フォームなども、今時はちゃんとデザインされた表示にしないと、とても古臭いイメージのページになって、
システム全体のクオリティが低く感じてしまいます。
そこで毎回無料アイコン検索を行って対応していたんですが、知り合いのデザイナーからは「今時はSVGでしょ」とか言われるんですが、
ここでは、CSSに焦点を絞って行います。
※SVGは今後シリーズ化したいと思います。

HUMANアイコン

TwitterやFacebookなど、SNSでは、自分のプロフィール画像を写真で撮ってアップロードしている人が多いのですが、
デフォルト状態では、簡素な人影イメージになっているのをよく見ます。

avatar-1577909_640

・・・・こんなんや・・・・

768px-PICA

このようなHUMANアイコンです。

CSSでセットしておくと、クラス名を付けるだけでいいので、扱いやすいと思います。
「画像もいいけど、CSSもね!」

ソースコード

カスタマイズポイント

widthとheightを変更する際は、内部パーツのleftとtopも、ずらしてあげましょう。
background-colorや人物部分のカラーは、好きに変更しても影響ないでしょう。
.humanのpositionをabsoluteにすると、絶対座標で設置できますよ。(その際はtop,leftで座標を追加してください)

プレビュー

非常に簡素だったので、マウスオーバーで背景色を変えてみました。
お試しあれ!

各種リンク

ちなみに、この記事の前回記事は以下です。
CSSでアイコン描画「closeボタン」

アイコン検索サイト

IconFinder
テーマやテイストなどでまとめてDLすることもできるし、クオリティも悪くない。
SVGデータもDLできるという優れたサイトですが、日本語検索ができないのが少しだけイタイです。
英語でいいだろって?その通りです・・・

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*