Light TALK Plus＋ vol.31「CSSで思い通りに画像を切り抜く方法」
「Light TALK Plus＋」とは…
アルバイトが気になった今ホットなWEBニュースやティップスをお届けするコーナーです。
今回のテーマは「CSSで思い通りに画像を切り抜く方法」です！
clip-path
CSSで画像加工する場合、object-fitやborder-radiusなどがありますが今回はclip-pathについて紹介します。
clip-pathはクリッピング領域を作り、内部を表示させ、外側部分では非表示になります。
サンプル画像
今回は右の画像を使用します。
値
clip-pathの初期値はnoneになり、基本的な値はinset() 、circle() 、ellipse() 、polygon() があります。
inset()
inset()では内側へのオフセットの設定を行います。
例）clip-path: inset(20px 20px);
roundを使うことで角丸を作ることができます。
例）clip-path: inset(20px 20px round 5px);
circle()
circle()では円のオフセットの設定を行います。
例）clip-path: circle(40%);
clip-path:
circle(30%);
clip-path:
circle(60%);
ellipse()
ellipse()では楕円のオフセットの設定を行います。
例）clip-path: ellipse(50px 40px at 50px 40px);
clip-path:
ellipse(10% 40% at 32%);
clip-path:
ellipse(80% 30% at 50%);
polygon()
polygon()では多角形のオフセットの設定を行います。
例）clip-path: polygon(50% 0%,0% 100%,100% 100%);
clip-path:
polygon(0% 50%,50% 100%,100% 0%);
clip-path:
polygon(50% 0%,0% 50%,50% 100%,100% 50%);
clip-pathを使えば、以下のようなこともできます。
HTML
<img class=”campus_img campus_img1″ alt=”サンプル画像01″ src=”/wp-content/uploads/2021/05/image01.jpg”>
<img class=”campus_img campus_img2″ alt=”サンプル画像01″ src=”/wp-content/uploads/2021/05/image01.jpg”>
<img class=”campus_img campus_img3″ alt=”サンプル画像01″ src=”/wp-content/uploads/2021/05/image01.jpg”>
</div>
CSS
.campus {
margin-bottom: 20px;
position: relative;
width: 140px;
height: 90px;
}
.campus_img {
position: absolute;
top: 0;
left: 0;
}
.campus_img1 {
clip-path: circle(38% at 0% 0%);
}
.campus_img2 {
clip-path: circle(38% at 50% 50%);
}
.campus_img3 {
clip-path: circle(38% at 100% 100%);
}
clip-pathは使い方を覚えれば、CSSだけで自由自在に画像を切り抜きできます。
AdobeのPhotoshopなどの画像ソフトが使うことができない場合、強い武器のひとつになります。
Light Webからのお知らせ
ライトウェブはプライバシーマークを取得しました！
今までも個人情報を取り扱う案件に携わって参りましたが、
より安心してお任せいただけるようになりました。
今後ともライトウェブをよろしくお願い致します！
