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でblend-modeを使ってみよう!
Search
Emi MATSUDA
November 29, 2019
Programming
0
210
CSSでblend-modeを使ってみよう!
https://tambourine.connpass.com/event/149622/
上記イベントで話したスライドです
Emi MATSUDA
November 29, 2019
Tweet
Share
More Decks by Emi MATSUDA
See All by Emi MATSUDA
コワくないmicroInteractionの考え方・作り方
matsudaemi
0
120
コワくないJS:オープニングトーク
matsudaemi
1
210
コワくない.js1@フレームワークの話
matsudaemi
0
190
リアルパンくずナビLT
matsudaemi
0
730
Other Decks in Programming
See All in Programming
Contemporary Test Cases
maaretp
0
140
CSC509 Lecture 12
javiergs
PRO
0
160
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2k
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
350
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
2.3k
Functional Event Sourcing using Sekiban
tomohisa
0
100
cmp.Or に感動した
otakakot
3
220
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
200
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Practical Orchestrator
shlominoach
186
10k
RailsConf 2023
tenderlove
29
900
Into the Great Unknown - MozCon
thekraken
32
1.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Music & Morning Musume
bryan
46
6.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Visualization
eitanlees
145
15k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Designing Experiences People Love
moore
138
23k
Transcript
CSSͰblend-modeΛͬͯΈΑ͏ʂ 2019.11.29(fri) 18:00~ tambourine inc. enginner : MATSUDA Emi
ϑϩϯτଆͰɺը૾Λ৮Δඞཁ͕͋Δ߹
ϑϩϯτଆͰɺը૾Λ৮Δඞཁ͕͋Δ߹ • Ϩεϙϯγϒ Πϝʔδ • τϦϛϯά • ϦαΠζ • มܗ
ϑϩϯτଆͰɺը૾Λ৮Δඞཁ͕͋Δ߹ • Ϩεϙϯγϒ Πϝʔδɿpictureཁૉɺsrcsetଐੑ • τϦϛϯάɿobject-fitʢclipফ໓ʣϓϩύςΟ • ϦαΠζɿwidthͱ͔max-widthͱ͔ͷϓϩύςΟ • มܗɿtransformϓϩύςΟ
͜ͳ͍ͩґཔ͞Εͨͭ • ʛɾωɾʣ{ ϩΰɺޫΒͤͯɻ
͜ͳ͍ͩґཔ͞Εͨͭ • ʛɾωɾʣ{ ϩΰɺޫΒͤͯɻ • …ɻ } ʢɾωɾ
͜ͳ͍ͩґཔ͞Εͨͭ • ͞Εͨϩΰ
͜ͳ͍ͩґཔ͞Εͨͭ • ͞Εͨϩΰ • ࠇഎܠ͖ͭpng
͜ͳ͍ͩґཔ͞Εͨͭ • ͞Εͨϩΰ • ࠇഎܠ͖ͭpng • …ɻ } ʢɾωɾ
CSSͰͳΜͱ͔͢Δͧɻ
ը૾ʹରͯ͠ޮՌΛ༩͑Δ
ը૾ʹରͯ͠ޮՌΛ༩͑Δ • filterϓϩύςΟ • blend-modeϓϩύςΟ
ը૾ʹରͯ͠ޮՌΛ༩͑Δ • filterϓϩύςΟɿը૾શମʹରͯ͠ޮՌΛ༩͑Δ • blend-modeϓϩύςΟɿ৭ͷॏͳΓʹޮՌΛ༩͑Δ
ը૾ʹରͯ͠ޮՌΛ༩͑Δ • filterϓϩύςΟɿը૾શମʹରͯ͠ޮՌΛ༩͑Δ • blend-modeϓϩύςΟɿ৭ͷॏͳΓʹޮՌΛ༩͑Δ
ը૾ʹରͯ͠ޮՌΛ༩͑Δ • ཁɺPhotoshopͷίϨ
blend-modeϓϩύςΟͱ • background-blend-mode • mix-blend-mode
blend-modeϓϩύςΟͱ • background-blend-modeɿཁૉͷഎܠը૾ɾഎܠ৭ΛϒϨ ϯυ͢Δͱ͖ʹ͏ • mix-blend-modeɿޙΖʹ͋Δཁૉͱͷը૾ɾഎܠ৭Λϒ Ϩϯυ͢Δͱ͖ʹ͏
blend-modeϓϩύςΟͱ • background-blend-modeɿཁૉͷഎܠը૾ɾഎܠ৭ΛϒϨ ϯυ͢Δͱ͖ʹ͏ • mix-blend-modeɿޙΖʹ͋Δཁૉͱͷը૾ɾഎܠ৭Λϒ Ϩϯυ͢Δͱ͖ʹ͏
blend-modeϓϩύςΟͱ • demo • https://jsfiddle.net/4ghyzvcp/53/
͜ͳ͍ͩґཔ͞Εͨͭ • ͞Εͨϩΰ • ࠇഎܠ͖ͭpng
͜ͳ͍ͩґཔ͞Εͨͭ • ͞Εͨϩΰ • demo • https://jsfiddle.net/xnza8hbk/9/
ҙ • ͑Δͱ͜ΖΛΘ͖·͑Α͏ɻ • https://caniuse.com/#search=mix-blend-mode
ҙ • ͍ͯ͠ͳ͍ը૾ͷΘΓʹ͏ͷNG • ͲΜͳڥͰɺใਖ਼͑͘͠ΔྗΛɻ • ϓϥεΞϧϑΝͷ০ʹ͏ͳΒ͍͍͔ͳʔɻ͘Β͍ɻ
·ͱΊ • ͓ࣄ͍ΖΜͳཁٻʹԠ͑ͳ͍ͱ͍͚ͳ͍ • ը૾ΛCSSͰ͍͡Δ͜ͱՄೳ • ͪΐͬͱͨ͠ΤϑΣΫτՃ͑ΔͷͰ͋ΕɺCSSศར • Γ͗͢Α͘ͳ͍
͓ΘΓ • ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ