Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSSでblend-modeを使ってみよう！

0cf97a5bfe52e6eadbf0532bc2a34698?s=47 Emi MATSUDA
November 29, 2019
Programming
0
120

 CSSでblend-modeを使ってみよう！

https://tambourine.connpass.com/event/149622/
上記イベントで話したスライドです

0cf97a5bfe52e6eadbf0532bc2a34698?s=128

Emi MATSUDA

November 29, 2019
Tweet

More Decks by Emi MATSUDA

See All by Emi MATSUDA
コワくないmicroInteractionの考え方・作り方
0cf97a5bfe52e6eadbf0532bc2a34698?s=48 matsudaemi
0
65
コワくないJS：オープニングトーク
0cf97a5bfe52e6eadbf0532bc2a34698?s=48 matsudaemi
1
180
コワくない.js1@フレームワークの話
0cf97a5bfe52e6eadbf0532bc2a34698?s=48 matsudaemi
0
160
リアルパンくずナビLT
0cf97a5bfe52e6eadbf0532bc2a34698?s=48 matsudaemi
0
440

Other Decks in Programming

See All in Programming
Keeping your team in top shape with the Gradle Enterprise API
5f69045a2ca496221cfc624405917cdf?s=48 runningcode
3
120
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
170
GoogleI/O2022 LT報告会資料
2bd3b8c3550384ab61d671b673c119bb?s=48 shinsukefujita1126
0
180
Reactive Java Microservices on Kubernetes with Spring and JHipster
7f408bc67dc9ae3b288ee92d16d3c4c2?s=48 deepu105
1
160
Cross Deviceチームにおけるスマートテレビアプリ開発ってどんな感じ？
95f926465b1c71fbb49850c5b6223c4d?s=48 cokaholic
0
120
IE Graduation Certificate
1ff811939fd0923df8321ec6d8bf9d4b?s=48 jxck
6
4.7k
Power Automateドリブンのチームマネジメント
0cc2ebc5781bcb2cae5f9ab7efa40ff2?s=48 hanaseleb
0
170
即、New Relic / New Relic NOW!
271fad8d53cd1f12f2b4b6d38e3d7bd3?s=48 uzulla
0
270
Why Airflow? & What's new in Airflow 2.3?
4114559062197ddc69b311ea6e6207d0?s=48 kaxil
0
110
Android Tools & Performance
7166bc2cbc462ab5fd1987a76d0fe709?s=48 takahirom
1
410
io22 extended What's new in app performance
82aa6e293e94bf37796f4ae50f583f6c?s=48 veronikapj
0
320
Branching out to Jetpack Compose
86f746f6c0c522ab2261bd55791d8a4a?s=48 chrisbanes
4
1.1k

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
225
120k
Designing for Performance
245cee81a9c424266e5e401d844ea881?s=48 lara
597
63k
Side Projects
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
450
37k
Web development in the modern age
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
197
9.3k
Code Review Best Practice
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
43
8.9k
Building an army of robots
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
299
40k
Fantastic passwords and where to find them - at NoRuKo
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
27
1.5k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
98
4.3k
The Pragmatic Product Professional
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
19
2.9k
Fireside Chat
864a009ac73600c7c02e1f26629dd989?s=48 paigeccino
11
1.3k
What’s in a name? Adding method to the madness
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k

Transcript

  1. CSSͰblend-modeΛ࢖ͬͯΈΑ͏ʂ 2019.11.29(fri) 18:00~ tambourine inc. enginner : MATSUDA Emi

  2. ϑϩϯτଆͰɺը૾Λ৮Δඞཁ͕͋Δ৔߹

  3. ϑϩϯτଆͰɺը૾Λ৮Δඞཁ͕͋Δ৔߹ • Ϩεϙϯγϒ Πϝʔδ • τϦϛϯά • ϦαΠζ • มܗ

  4. ϑϩϯτଆͰɺը૾Λ৮Δඞཁ͕͋Δ৔߹ • Ϩεϙϯγϒ Πϝʔδɿpictureཁૉɺsrcsetଐੑ • τϦϛϯάɿobject-fitʢclip͸ফ໓ʣϓϩύςΟ • ϦαΠζɿwidthͱ͔max-widthͱ͔ͷϓϩύςΟ • มܗɿtransformϓϩύςΟ

  5. ͜ͳ͍ͩґཔ͞Εͨ΍ͭ • ʛɾωɾʣ{ ϩΰɺޫΒͤͯɻ

  6. ͜ͳ͍ͩґཔ͞Εͨ΍ͭ • ʛɾωɾʣ{ ϩΰɺޫΒͤͯɻ • …ɻ } ʢɾωɾ

  7. ͜ͳ͍ͩґཔ͞Εͨ΍ͭ • ౉͞Εͨϩΰ

  8. ͜ͳ͍ͩґཔ͞Εͨ΍ͭ • ౉͞Εͨϩΰ • ࠇഎܠ͖ͭpng

  9. ͜ͳ͍ͩґཔ͞Εͨ΍ͭ • ౉͞Εͨϩΰ • ࠇഎܠ͖ͭpng • …ɻ } ʢɾωɾ

  10. CSSͰͳΜͱ͔͢Δͧɻ

  11. ը૾ʹରͯ͠௚઀ޮՌΛ༩͑Δ

  12. ը૾ʹରͯ͠௚઀ޮՌΛ༩͑Δ • filterϓϩύςΟ • blend-modeϓϩύςΟ

  13. ը૾ʹରͯ͠௚઀ޮՌΛ༩͑Δ • filterϓϩύςΟɿը૾શମʹରͯ͠ޮՌΛ༩͑Δ • blend-modeϓϩύςΟɿ৭ͷॏͳΓʹޮՌΛ༩͑Δ

  14. ը૾ʹରͯ͠௚઀ޮՌΛ༩͑Δ • filterϓϩύςΟɿը૾શମʹରͯ͠ޮՌΛ༩͑Δ • blend-modeϓϩύςΟɿ৭ͷॏͳΓʹޮՌΛ༩͑Δ

  15. ը૾ʹରͯ͠௚઀ޮՌΛ༩͑Δ • ཁ͸ɺPhotoshopͷίϨ

  16. blend-modeϓϩύςΟͱ͸ • background-blend-mode • mix-blend-mode

  17. blend-modeϓϩύςΟͱ͸ • background-blend-modeɿཁૉͷഎܠը૾ɾഎܠ৭ΛϒϨ ϯυ͢Δͱ͖ʹ࢖͏ • mix-blend-modeɿޙΖʹ͋Δཁૉͱͷը૾ɾഎܠ৭Λϒ Ϩϯυ͢Δͱ͖ʹ࢖͏

  18. blend-modeϓϩύςΟͱ͸ • background-blend-modeɿཁૉͷഎܠը૾ɾഎܠ৭ΛϒϨ ϯυ͢Δͱ͖ʹ࢖͏ • mix-blend-modeɿޙΖʹ͋Δཁૉͱͷը૾ɾഎܠ৭Λϒ Ϩϯυ͢Δͱ͖ʹ࢖͏

  19. blend-modeϓϩύςΟͱ͸ • demo • https://jsfiddle.net/4ghyzvcp/53/

  20. ͜ͳ͍ͩґཔ͞Εͨ΍ͭ • ౉͞Εͨϩΰ • ࠇഎܠ͖ͭpng

  21. ͜ͳ͍ͩґཔ͞Εͨ΍ͭ • ౉͞Εͨϩΰ • demo • https://jsfiddle.net/xnza8hbk/9/

  22. ஫ҙ఺ • ࢖͑Δͱ͜ΖΛΘ͖·͑Α͏ɻ • https://caniuse.com/#search=mix-blend-mode

  23. ஫ҙ఺ • ׬੒͍ͯ͠ͳ͍ը૾ͷ୅ΘΓʹ࢖͏ͷ͸NG • ͲΜͳ؀ڥͰ΋ɺ৘ใ͸ਖ਼͘͠఻͑Δ౒ྗΛɻ • ϓϥεΞϧϑΝͷ૷০ʹ࢖͏ͳΒ͍͍͔ͳʔɻ͘Β͍ɻ

  24. ·ͱΊ • ͓࢓ࣄ͸͍ΖΜͳཁٻʹԠ͑ͳ͍ͱ͍͚ͳ͍ • ը૾ΛCSSͰ͍͡Δ͜ͱ͸Մೳ • ͪΐͬͱͨ͠ΤϑΣΫτՃ͑ΔͷͰ͋Ε͹ɺCSS͸ศར • ΍Γ͗͢͸Α͘ͳ͍

  25. ͓ΘΓ • ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ