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
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
370
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
390
エンターテイメント業界で利用されるAWS
demuyan
0
210
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
230
Netty Chicago Java User Group 2024-04-17
sullis
0
190
Polars入門
daikikatsuragawa
1
100
Fragment Composition of GraphQL
quramy
7
1.1k
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
460
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
910
Java 22 Overview
kishida
1
190
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
870
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Six Lessons from altMBA
skipperchong
21
3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Fireside Chat
paigeccino
21
2.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
Gamification - CAS2011
davidbonilla
76
4.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Writing Fast Ruby
sferik
621
60k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
The Cult of Friendly URLs
andyhume
74
5.7k
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/