Photoshop不要!四角い画像を丸く表示する方法
みなさんこんにちは!
俺たち非IT系web担一年生プロジェクトの瀬戸です。
今日は、ちまたで見かける、人物とかによく使われる丸く表示される画像の作り方を紹介します。
↓こんなやつ
これだけで、なんだかそれっぽいですよね!?
プロが作ってる感が一気に出ます。
これ実は、Photoshopなどは一切不要。cssだけで作れるのです。
作り方はすごく簡単。
まずは、四角い画像を貼ります。
次に、適当なクラスを指定し、そこに下記のcssを記述します。
ここでは仮に、「face」というクラスを作成しました。
すると、このような画像になります。
はい、簡単ですね!
このcssのポイントは、数値を%で表記したことです。
これであれば、どんなサイズの画像でも丸くなりますので、おすすめです!
それでは、引き続き楽しいcssライフをお過ごしください!