CSSのclip-pathの紹介

Transcript

1. CSS clip-path
   の紹介
   Press Space for next page
   

   View Slide

2. 自己紹介
   📝 飯野陽平（wheatandcat
   ）
   🏢 フリーランスエンジニア（シェアフル株式会社CTO
   ）
   💻 Blog: https://www.wheatandcat.me/
   📚 Booth: https://wheatandcat.booth.pm/
   🛠 今までに作ったもの
   memoir
   ペペロミア
   Atomic Design Check List
   

   View Slide

3. clip-path
   とは
   clip-path
   はCSS
   のプロパティで、
   
   要素のどの部分を表示するかを設定するクリッピング領域を指定できるCSS
   。
   具体的には、HTML
   の要素の一部をトリミングしたり、SVG
   のPath
   を指定して動的に表示することができる。
   MDN clip-path
   

   View Slide

4. 対応ブラウザ
   https://caniuse.com/?search=clip-path
   

   View Slide

5. 使っても大丈夫か？
   IE11
   以外のブラウザは、ほぼサポート済み
   IE11
   のサポートも2022
   年6
   月15
   日で終了なので、それ以降は使ってもOK
   👌
   

   View Slide

6. clip-path
   に設定できる値
   値 内容
   inset
   四角形を設定
   circle
   丸を設定
   ellipse
   楕円を設定
   polygon
   多角形を設定
   

   View Slide

7. 実際にサンプルを作ってみた
   

   View Slide

8. 斜め線を使用したデザイン
   https://try-css.vercel.app/clippath/section
   

   View Slide

9. clip-path
   で四角形を書く
   https://try-css.vercel.app/clippath/inset
   

   View Slide

10. clip-path
    で丸を書く
    https://try-css.vercel.app/clippath/circle
    

    View Slide

11. clip-path
    で三角形を書く
    https://try-css.vercel.app/clippath/triangle
    

    View Slide

12. clip-path
    でカードにリボンをつける
    https://try-css.vercel.app/clippath/ribbon
    

    View Slide

13. clip-path
    でボタンにアニメーションをつける
    https://try-css.vercel.app/clippath/button
    

    View Slide

14. clip-path
    で画像を切り抜く
    https://try-css.vercel.app/clippath/image
    

    View Slide

15. clip-path
    を使ってデザインしてみる
    https://try-css.vercel.app/clippath/screen
    

    View Slide

16. clip-path
    を使ってデザインしてみる
    https://try-css.vercel.app/clippath/screen
    

    View Slide

17. おまけ
    : clip-path
    でサーチライトっぽいアニメーション
    https://try-css.vercel.app/clippath/light
    

    View Slide

18. まとめ
    今までcss
    のborder
    で無理やり実装していた箇所が、clip-pat
    でスッキリかけるようになった。
    アニメーションと組み合わせれば色々できる
    
    https://digipress.info/tech/revealing-text-by-clip-path/
    IE11
    のサポート期間が終わったら、色々な場面でも使用しても良さそう。
    

    View Slide

19. ご清聴ありがとうございました
    

    View Slide