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
260
clip-path使ってみた
CSSのclip-pathを使って「真ん中を切り抜いたマスク」を作成したお話しです。
tatsumiakahori
February 05, 2021
Tweet
Share
More Decks by tatsumiakahori
See All by tatsumiakahori
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
240
TSデザイン改修で得たCSS設計の学び
tatsumiakahori
0
330
リッチでいい感じなWebサイトをお金も労力もかけずに作る方法
tatsumiakahori
0
200
self introduction 2
tatsumiakahori
0
40
Self introduction-Tatsumi Akahori
tatsumiakahori
0
500
Other Decks in Programming
See All in Programming
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.1k
PHPはいつから死んでいるかの調査
chiroruxx
1
380
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
720
Netty Chicago Java User Group 2024-04-17
sullis
0
170
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
330
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
480
Git Rebase
bkuhlmann
11
1.6k
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
"config" ってなんだ? / What is "config"?
okashoi
0
240
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Design by the Numbers
sachag
274
18k
Rails Girls Zürich Keynote
gr2m
91
13k
Practical Orchestrator
shlominoach
182
9.7k
Building an army of robots
kneath
300
41k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
BBQ
matthewcrist
80
8.8k
The Invisible Side of Design
smashingmag
294
49k
Music & Morning Musume
bryan
41
5.6k
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/