CSSのみで画像を丸く切り抜き、境界線をぼかす方法
2023年8月22日
CSSで画像を円形にくり抜き境界線をボカす方法です。
Photoshopなどで画像を円形にくり抜き境界線をぼかしpngなどで背景を透過して使用すると
画像の入れ替えの度に画像を作成し直す必要がある為、CSSで作成してみます。
CSSコードを作成。
mask-imageを使いradial-gradientで外側を透過させます。
色は何色でも大丈夫です。※Photoshopのクリッピングマスクと同じイメージ。
.circle-box {
position: relative;
width: 500px;
height: 500px;
border-radius: 50%;
-webkit-mask-image: radial-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 70%);
mask-image: radial-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 70%);
}
.circle-box img{
object-fit: cover;
position: absolute;
width: 100%;
height: 100%;
}object-fit: coverとposition: absoluteを使い円形内に収まる様に設定。
正方形の画像を用意した場合はwidth: 100%のみでOK。
続いてhtmlコード。
img要素を囲むだけ。
<div class="circle-box">
<img src="img/circle-sample.jpg" alt="サンプル">
</div>完成です。
千葉県の中小企業様を中心として、数多くのホームページ制作を行っています。
WEB制作会社はたくさんあるけれど、いまいちどこを選べば良いのかわからない。
そういったお客様の声をよく耳にします。
そんな時は、山本印刷に是非お任せ下さい！
印刷会社として創業より培ったデザイン力、マーケティング力に加え、名刺、ポスター、看板、カレンダーなど企業PRに必要な全てを山本印刷で承る事が可能です。
事前に細かなヒアリング・調査を行い、お客様のご要望をお伺いしたうえで、WEBサイトのターゲットや目的を明確にします。
そして、豊富なプランの中からお客様に合ったプランを選択し、明確・安心な料金設定で、効果的なWEBサイトをお客様にご提案します。
WEB制作専門スタッフがデザインから納品まで一貫して作成致しますので、格安でもクオリティの高いWEBサイトをご提供致します。
詳しくはhttps://www.yp-net.co.jp/web/をご覧ください。
