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

    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