Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSSのclip-pathの紹介

Yohei Iino
March 01, 2022

 CSSのclip-pathの紹介

Yohei Iino

March 01, 2022
Tweet

More Decks by Yohei Iino

Other Decks in Design

Transcript

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

  2. 自己紹介 📝 飯野陽平(wheatandcat ) 🏢 フリーランスエンジニア(シェアフル株式会社CTO ) 💻 Blog: https://www.wheatandcat.me/

    📚 Booth: https://wheatandcat.booth.pm/ 🛠 今までに作ったもの memoir ペペロミア Atomic Design Check List
  3. clip-path とは clip-path はCSS のプロパティで、 要素のどの部分を表示するかを設定するクリッピング領域を指定できるCSS 。 具体的には、HTML の要素の一部をトリミングしたり、SVG のPath

    を指定して動的に表示することができる。 MDN clip-path
  4. 対応ブラウザ https://caniuse.com/?search=clip-path

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

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

    polygon 多角形を設定
  7. 実際にサンプルを作ってみた

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

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

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

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

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

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

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

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

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

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

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

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