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
740
CSSのclip-pathの紹介
Yohei Iino
March 01, 2022
Tweet
Share
More Decks by Yohei Iino
See All by Yohei Iino
1年半放置したExpo製アプリを最新化してみた
wheatandcat
0
40
作成中のFlutterアプリの中間発表
wheatandcat
0
39
最近読んだ技術書を簡単紹介
wheatandcat
0
61
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
wheatandcat
0
120
Firebase App Checkを実装したので紹介
wheatandcat
0
110
PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた
wheatandcat
0
270
Flutter HooksとRiverpodの解説
wheatandcat
0
380
T3 Stack(応用編: Next Auth & SSRの実装紹介)
wheatandcat
1
340
App Routerの紹介
wheatandcat
0
98
Other Decks in Design
See All in Design
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
420
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
1.6k
ポートフォリオ_webデザイナー
nami_webdesigner
0
120
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.6k
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
310
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
180
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
270
DC Style Redesign
mcduckyart
0
140
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
720
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3k
AI動画生成ガチャ紹介
piyo7
1
150
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
Featured
See All Featured
Navigating Team Friction
lara
187
15k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
KATA
mclloyd
30
14k
What's in a price? How to price your products and services
michaelherold
246
12k
Adopting Sorbet at Scale
ufuk
77
9.5k
BBQ
matthewcrist
89
9.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Being A Developer After 40
akosma
90
590k
How to Ace a Technical Interview
jacobian
278
23k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
A Tale of Four Properties
chriscoyier
160
23k
Automating Front-end Workflow
addyosmani
1370
200k
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 のサポート期間が終わったら、色々な場面でも使用しても良さそう。
ご清聴ありがとうございました