Slide 1
Slide 1 text
CSS clip-path
の紹介
Press Space for next page
Slide 2
Slide 2 text
自己紹介
📝 飯野陽平（wheatandcat
）
🏢 フリーランスエンジニア（シェアフル株式会社CTO
）
💻 Blog: https://www.wheatandcat.me/
📚 Booth: https://wheatandcat.booth.pm/
🛠 今までに作ったもの
memoir
ペペロミア
Atomic Design Check List
Slide 3
Slide 3 text
clip-path
とは
clip-path
はCSS
のプロパティで、
要素のどの部分を表示するかを設定するクリッピング領域を指定できるCSS
。
具体的には、HTML
の要素の一部をトリミングしたり、SVG
のPath
を指定して動的に表示することができる。
MDN clip-path
Slide 4
Slide 4 text
対応ブラウザ
https://caniuse.com/?search=clip-path
Slide 5
Slide 5 text
使っても大丈夫か？
IE11
以外のブラウザは、ほぼサポート済み
IE11
のサポートも2022
年6
月15
日で終了なので、それ以降は使ってもOK
👌
Slide 6
Slide 6 text
clip-path
に設定できる値
値 内容
inset
四角形を設定
circle
丸を設定
ellipse
楕円を設定
polygon
多角形を設定
Slide 7
Slide 7 text
実際にサンプルを作ってみた
Slide 8
Slide 8 text
斜め線を使用したデザイン
https://try-css.vercel.app/clippath/section
Slide 9
Slide 9 text
clip-path
で四角形を書く
https://try-css.vercel.app/clippath/inset
Slide 10
Slide 10 text
clip-path
で丸を書く
https://try-css.vercel.app/clippath/circle
Slide 11
Slide 11 text
clip-path
で三角形を書く
https://try-css.vercel.app/clippath/triangle
Slide 12
Slide 12 text
clip-path
でカードにリボンをつける
https://try-css.vercel.app/clippath/ribbon
Slide 13
Slide 13 text
clip-path
でボタンにアニメーションをつける
https://try-css.vercel.app/clippath/button
Slide 14
Slide 14 text
clip-path
で画像を切り抜く
https://try-css.vercel.app/clippath/image
Slide 15
Slide 15 text
clip-path
を使ってデザインしてみる
https://try-css.vercel.app/clippath/screen
Slide 16
Slide 16 text
clip-path
を使ってデザインしてみる
https://try-css.vercel.app/clippath/screen
Slide 17
Slide 17 text
おまけ
: clip-path
でサーチライトっぽいアニメーション
https://try-css.vercel.app/clippath/light
Slide 18
Slide 18 text
まとめ
今までcss
のborder
で無理やり実装していた箇所が、clip-pat
でスッキリかけるようになった。
アニメーションと組み合わせれば色々できる
https://digipress.info/tech/revealing-text-by-clip-path/
IE11
のサポート期間が終わったら、色々な場面でも使用しても良さそう。
Slide 19
Slide 19 text
ご清聴ありがとうございました