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

CSSのclip-pathの紹介

Yohei Iino
March 01, 2022
Design
0
95

 CSSのclip-pathの紹介

Yohei Iino

March 01, 2022
Tweet

More Decks by Yohei Iino

See All by Yohei Iino
zxとRetoolでコード健全性の可視化のダッシュボードを作成する
wheatandcat
0
16
opentelemetry-goとGCPでパフォーマンス解析
wheatandcat
0
16
Cloud Runの紹介
wheatandcat
0
29
Denoの紹介
wheatandcat
0
36
Prismaを試してみた
wheatandcat
0
160
振り返りアプリを作ってみた話
wheatandcat
0
340
React Native + Firestoreで運用しているアプリをRESTful APIからGraphQLに移行した話
wheatandcat
0
65

Other Decks in Design

See All in Design
Best Practices For Designing Apps For India - Devfest Bangalore 2022
soham
0
200
GFS - Startup School 2022
soham
0
360
UXA2022 Day 2; Tim Yeo - Design Leadership for Introverts
uxaustralia
PRO
0
390
「UXの神」との対話
hiranotomoki
0
620
デジタルプロダクトデザイナーしくじりあるある 〜失敗を糧にデザイナーとして2ランクアップ！〜
mobilitytechnologies
2
360
視覚障害者と探究するLSPの可能性｜LEGO® SERIOUS PLAY® Coffee Chat Japan #09
keitatatakizawa
1
140
Interest + Curiosity Booklet
juliaso
1
150
環境シミュレーション建築デザイン実践ガイドブック ‐ 自然とつながる建築をめざして
ais
0
120
Dear User, Let's Be Friends: Designing Friendly Interfaces - UX Lisbon 2022
scottkubie
1
320
dipp 點譜數位方案
91appguide
1
260
心地よいテンポを届ける！『プロジェクトセカイ』のゲームUI/UX
cyberagentdevelopers
PRO
1
1.4k
Storyboard: Midnight Cookie
luchiianita
0
320

Featured

See All Featured
Done Done
chrislema
174
14k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
130k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
316
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
1k
Rebuilding a faster, lazier Slack
samanthasiow
63
7.3k
Making the Leap to Tech Lead
cromwellryan
113
7.5k
Pencils Down: Stop Designing & Start Developing
hursman
113
9.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.2k
Practical Orchestrator
shlominoach
178
8.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
No one is an island. Learnings from fostering a developers community.
thoeni
10
1.4k
Designing on Purpose - Digital PM Summit 2013
jponch
107
5.7k

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. ご清聴ありがとうございました