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

by Emi MATSUDA

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

CSSͰͳΜͱ͔͢Δͧɻ

Slide 11

Slide 11 text

ը૾ʹରͯ͠௚઀ޮՌΛ༩͑Δ

Slide 12

Slide 12 text

ը૾ʹରͯ͠௚઀ޮՌΛ༩͑Δ • ﬁlterϓϩύςΟ • blend-modeϓϩύςΟ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

͓ΘΓ • ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ