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

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

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

0cf97a5bfe52e6eadbf0532bc2a34698?s=128

Emi MATSUDA

November 29, 2019
Tweet

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