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

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

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