Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSSのclip-pathの紹介
Search
Yohei Iino
March 01, 2022
Design
0
490
CSSのclip-pathの紹介
Yohei Iino
March 01, 2022
Tweet
Share
More Decks by Yohei Iino
See All by Yohei Iino
PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた
wheatandcat
0
26
Flutter HooksとRiverpodの解説
wheatandcat
0
38
T3 Stack(応用編: Next Auth & SSRの実装紹介)
wheatandcat
1
99
App Routerの紹介
wheatandcat
0
41
Flutter × GraphQLでアプリを作ってみる
wheatandcat
0
150
T3 Stack + Supabaseでアプリを作ってみる
wheatandcat
0
130
Supabaseの紹介
wheatandcat
0
130
tRPCの紹介
wheatandcat
0
110
Plasmoの紹介
wheatandcat
0
52
Other Decks in Design
See All in Design
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
220
私たちが取り組んできたアクセシビリティと これから取り組んでいくアクセシビリティについて
securecat
1
250
情報サービスユニット UXUIチーム紹介/btobuxui
nikkei_engineer_recruiting
1
130
速攻で価値検証して無駄なものを作らないプロダクトデザイン
cremacrema
3
320
Shinjuku.rb #91 好きなもの紹介LT大会 "便利"や"役に立つ"とは別方面のRubyをつかったプログラミングがたのしい話
bash0c7
0
130
他人事じゃないWebアクセシビリティ入門
arihiro17
0
370
プロダクトを成長させる生成 AI のユースケース発見ワークショップ vol.3
icoxfog417
1
260
スマートバンクのプロダクトデザイン
putchomsmartbank
6
2k
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.7k
Les petites aventures de CSS, saison 2024
goetter
2
3.7k
AIイラスト生成・編集テクニック紹介
piyo7
2
160
Design for disaster preparedness
norinity1103
0
120
Featured
See All Featured
Facilitating Awesome Meetings
lara
46
5.8k
The Invisible Side of Design
smashingmag
294
50k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Statistics for Hackers
jakevdp
792
220k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
How to train your dragon (web standard)
notwaldorf
79
5.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Speed Design
sergeychernyshev
9
270
Thoughts on Productivity
jonyablonski
64
4.1k
Happy Clients
brianwarren
94
6.6k
4 Signs Your Business is Dying
shpigford
178
21k
Transcript
CSS clip-path の紹介 Press Space for next page
自己紹介 📝 飯野陽平(wheatandcat ) 🏢 フリーランスエンジニア(シェアフル株式会社CTO ) 💻 Blog: https://www.wheatandcat.me/
📚 Booth: https://wheatandcat.booth.pm/ 🛠 今までに作ったもの memoir ペペロミア Atomic Design Check List
clip-path とは clip-path はCSS のプロパティで、 要素のどの部分を表示するかを設定するクリッピング領域を指定できるCSS 。 具体的には、HTML の要素の一部をトリミングしたり、SVG のPath
を指定して動的に表示することができる。 MDN clip-path
対応ブラウザ https://caniuse.com/?search=clip-path
使っても大丈夫か? IE11 以外のブラウザは、ほぼサポート済み IE11 のサポートも2022 年6 月15 日で終了なので、それ以降は使ってもOK 👌
clip-path に設定できる値 値 内容 inset 四角形を設定 circle 丸を設定 ellipse 楕円を設定
polygon 多角形を設定
実際にサンプルを作ってみた
斜め線を使用したデザイン https://try-css.vercel.app/clippath/section
clip-path で四角形を書く https://try-css.vercel.app/clippath/inset
clip-path で丸を書く https://try-css.vercel.app/clippath/circle
clip-path で三角形を書く https://try-css.vercel.app/clippath/triangle
clip-path でカードにリボンをつける https://try-css.vercel.app/clippath/ribbon
clip-path でボタンにアニメーションをつける https://try-css.vercel.app/clippath/button
clip-path で画像を切り抜く https://try-css.vercel.app/clippath/image
clip-path を使ってデザインしてみる https://try-css.vercel.app/clippath/screen
clip-path を使ってデザインしてみる https://try-css.vercel.app/clippath/screen
おまけ : clip-path でサーチライトっぽいアニメーション https://try-css.vercel.app/clippath/light
まとめ 今までcss のborder で無理やり実装していた箇所が、clip-pat でスッキリかけるようになった。 アニメーションと組み合わせれば色々できる https://digipress.info/tech/revealing-text-by-clip-path/ IE11 のサポート期間が終わったら、色々な場面でも使用しても良さそう。
ご清聴ありがとうございました