[CSS] ユーザーアイコンをCSSだけで描きたい
- ウェブサービスのアカウントページやマイページへの入り口としてよく使われるユーザーアイコンをCSSで描いてみました
- フォントアイコンのような感覚で使えるように、font-sizeの変更で全体のサイズが変わるようにしています
サンプルコード
html
<span class="user"></span>
CSS
.user {
display: inline-block;
position: relative;
border-radius: 50%;
background-color: #89baeb;
width: 1em;
height: 1em;
font-size: 200px;
overflow: hidden;
}
.user::before,
.user::after {
position: absolute;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
background-color: #3388dd;
content: "";
}
.user::before {
top: 0.15em;
width: 0.4em;
height: 0.4em;
}
.user::after {
bottom: -0.4em;
width: 0.8em;
height: 0.8em;
}
- before疑似要素で頭の部分を、after疑似要素で体の部分を描いています
- どちらも「border-radius: 50%;」で要素を丸型にします。体の部分が大枠の円からはみ出ても大丈夫なように「overflow: hidden;」ではみ出した部分を非表示にしています
CSSでアイコンを描いてみるシリーズ
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。