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
clip-path使ってみた
Search
tatsumiakahori
February 05, 2021
Programming
0
280
clip-path使ってみた
CSSのclip-pathを使って「真ん中を切り抜いたマスク」を作成したお話しです。
tatsumiakahori
February 05, 2021
Tweet
Share
More Decks by tatsumiakahori
See All by tatsumiakahori
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
260
TSデザイン改修で得たCSS設計の学び
tatsumiakahori
0
370
リッチでいい感じなWebサイトをお金も労力もかけずに作る方法
tatsumiakahori
0
200
self introduction 2
tatsumiakahori
0
65
Self introduction-Tatsumi Akahori
tatsumiakahori
0
530
Other Decks in Programming
See All in Programming
contribution to astral-sh/uv
shunsock
0
540
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
Software Architecture
hschwentner
6
2.3k
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
430
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
660
Introduce Hono CLI
yusukebe
6
3.1k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
480
モテるデスク環境
mozumasu
3
1.3k
CSC509 Lecture 08
javiergs
PRO
0
250
AI Agent 時代的開發者生存指南
eddie
4
2.1k
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
Featured
See All Featured
Leading Effective Engineering Teams in the AI Era
addyosmani
7
620
Done Done
chrislema
185
16k
Building Adaptive Systems
keathley
44
2.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Rails Girls Zürich Keynote
gr2m
95
14k
Navigating Team Friction
lara
190
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Code Reviewing Like a Champion
maltzj
526
40k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Transcript
clip-path使ってみた
このマスクの部分、皆さんならどう実装しますか? 物件登録時に所在地 を指定するモーダル
選ばれたのは…
clip-pathでした。
clip-pathの基本的な使い方 clip-path: <clip-source> clip-path:[ <basic-shape> || <geometry-box> ] clip-source:URLでSVG<clipPath>要素を参照 basic-shape:CSS
Shapes仕様で定義されている基本シェイプ機能を指定(inset, circle, ellipse, poligon) geometry-box:basic-shapeと組み合わせて指定すると、basic-shapeでのリファレンスボックスのようになります。 ※具体的な指定方法は不明です。
https://bennettfeely.com/clippy/ CSS generator 『Clippy』 ① ⑩ ⑨ ② ③ ⑧
④ ⑤ ⑥ ⑦ ① ② ③ ④ ⑥ ⑦ ⑧ ⑨ ⑤ ⑩
468px 468px 1198px 30.5% 30.5% 39% 10.2% 10.2% 79.6% 588px
𝒙 𝐲
clip-path: polygon( 0% 0%, 0% 100%, 30.5% 100%, 30.5% 10.2%,
69.5% 10.2%, 69.5% 89.8%, 30.5% 89.8%, 30.5% 100%, 100% 100%, 100% 0% ); ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ① ⑩ ⑨ ② ③ ⑧ ④ ⑤ ⑥ ⑦
<div class="modal-map__mask"></div> .modal-map__mask{ position: absolute; top: 0; left: 0; background-color:
rgba(0, 0, 0, .7); width: 1198px; height: 588px; clip-path: polygon(0% 0%, 0% 100%, 30.5% 100%, 30.5% 10.2%, 69.5% 10.2%, 69.5% 89.8%, 30.5% 89.8%, 30.5% 100%, 100% 100%, 100% 0%); z-index: 9; }
できた…
と思いきや…
レスポンシブ対応ができていない …
widthを100%にすればええんや!
切り抜き部分も可変になってしまっている …
この部分 = 1198px - 100%
(1198px - 100%)の半分の値分左にずらせばええんや!
@include breakpoint-down(desktop) { left: calc((100% - 1198px) / 2); }
完成。
おまけ clip-pathでアニメーション https://jsfiddle.net/takahori/jhpd4nxm/136/