Internt övningsdokument med svg-masker. OBS — ej produktionsfärdig kod. Funkar enbart i desktop viewports.
Vi gör Wordpress till en webbtiger
Svart mask som fyllts med bakgrundsbild. Linjär gradient med blend-mode 'lighten'. Färgerna kan styras precis hur som helst.
Headline
Samma mask som fyllts med enbart linjär gradient.
Headline
Samma mask som som duplicerats, flippats och fyllts med linjär gradient i tre kulörer. Gradienten är satt till 141 grader. Opacitet på bilderna så övertäckningen syns.
Gimmie five or four, or maybe three, perhaps two or at least one.
Mask som fyllts med gradient i tre kulörer som ovan. Texten har lagts ovanpå med z-index och har en opacitet på 74%.
Open your heart
Samma mask som ovan men med både bakgrundsbild och gradient.
Fight for your right to party
Mask (av en mask 😀) som fyllts med bild av ett betongblock. Lätt opacitet på rubriken.
Fejkat misspass med gult, magenta och cyan. Masken är lagd tre gånger och flyttad 10 pixlar vänster, höger och nedåt.
Här är en tonad mask. Det funkar också, fejdar liksom ut nedåt. Bilden med molnen är samma både i bakgrunden och i brillornas mask, men i masken ligger ett gråskalefilter. Eftersom det är en svg-mask så är vektorgrafiken alltid knivskarp.HTML-koden är löjligt enkel. Så här ser den ut:<div class="sixth outer border-6"><div class="image"></div></div>
❤️ code. The end.