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

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

 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
0cf97a5bfe52e6eadbf0532bc2a34698?s=48 matsudaemi
0
61
0cf97a5bfe52e6eadbf0532bc2a34698?s=48 matsudaemi
1
160
0cf97a5bfe52e6eadbf0532bc2a34698?s=48 matsudaemi
0
150
0cf97a5bfe52e6eadbf0532bc2a34698?s=48 matsudaemi
0
390

Other Decks in Programming

See All in Programming
Db8efd836c9a09b71e3d8e1c60d6ea84?s=48 colinfay
0
300
0157a830bfaa0c5426422c45aa0b2637?s=48 bo0km4n
3
410
A49edf2521f9e75826c6546c7585f17a?s=48 tsuyukimakoto
3
310
0a5d28eceda9a14b5b5f697b36620e8f?s=48 pddg
0
160
A4d1023b1de7890c67a083d14573882d?s=48 ktgrstsh
0
350
5c15692e0997b53f1de1627d9fd41f46?s=48 zucky_zakizaki
0
290
Cc696ce673253d3bd21b3aa9e7927f39?s=48 hitode909
0
400
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
0
200
7437b9552e193bb1f8ea757bf1a51175?s=48 aruneko
1
240
03981c503b249d4e2d739b0db0b90697?s=48 yosu
5
2.5k
9e014a8c38462fcaf2c136e65837b348?s=48 free_world21
1
470
0d04162c7a3c2907c059a06dbcd23cf4?s=48 tokorom
4
130

Featured

See All Featured
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
83
4.6k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
144
6.5k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
145
12k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
13
700
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
230
770k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
22
1.6k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
8
590
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
648
110k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
220
14k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
310

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. ͓ΘΓ • ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ