Light TALK Plus+ vol.31「CSSで思い通りに画像を切り抜く方法」

「Light TALK Plus+」とは…

アルバイトが気になった今ホットなWEBニュースやティップスをお届けするコーナーです。
今回のテーマは「CSSで思い通りに画像を切り抜く方法」です!

clip-path

CSSで画像加工する場合、object-fitやborder-radiusなどがありますが今回はclip-pathについて紹介します。
clip-pathはクリッピング領域を作り、内部を表示させ、外側部分では非表示になります。

サンプル画像

今回は右の画像を使用します。

サンプル画像01

clip-pathの初期値はnoneになり、基本的な値はinset()circle()ellipse()polygon() があります。

inset()

inset()では内側へのオフセットの設定を行います。
例)clip-path: inset(20px 20px);

サンプル画像01

roundを使うことで角丸を作ることができます。
例)clip-path: inset(20px 20px round 5px);

サンプル画像01

circle()

circle()では円のオフセットの設定を行います。
例)clip-path: circle(40%);

サンプル画像01

clip-path:
circle(30%);

サンプル画像01

clip-path:
circle(60%);

サンプル画像01

ellipse()

ellipse()では楕円のオフセットの設定を行います。
例)clip-path: ellipse(50px 40px at 50px 40px);

サンプル画像01

clip-path:
ellipse(10% 40% at 32%);

サンプル画像01

clip-path:
ellipse(80% 30% at 50%);

サンプル画像01

polygon()

polygon()では多角形のオフセットの設定を行います。
例)clip-path: polygon(50% 0%,0% 100%,100% 100%);

サンプル画像01

clip-path:
polygon(0% 50%,50% 100%,100% 0%);

サンプル画像01

clip-path:
polygon(50% 0%,0% 50%,50% 100%,100% 50%);

サンプル画像01

clip-pathを使えば、以下のようなこともできます。

サンプル画像01 サンプル画像01 サンプル画像01

HTML

<div class=”campus”>
<img class=”campus_img campus_img1″ alt=”サンプル画像01″ src=”https://lightweb.co.jp/wordpress/wp-content/uploads/2021/05/image01.jpg”>
<img class=”campus_img campus_img2″ alt=”サンプル画像01″ src=”https://lightweb.co.jp/wordpress/wp-content/uploads/2021/05/image01.jpg”>
<img class=”campus_img campus_img3″ alt=”サンプル画像01″ src=”https://lightweb.co.jp/wordpress/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からのお知らせ

ライトウェブはプライバシーマークを取得しました!
今までも個人情報を取り扱う案件に携わって参りましたが、
より安心してお任せいただけるようになりました。
今後ともライトウェブをよろしくお願い致します!