Cum să utilizați modurile de amestec CSS

Modurile de amestec CSS sunt o modalitate ușoară de a adăuga efecte de imagine chiar în browser.

Din această cauză, modul tradițional de editare și apoi salvare a fotografiilor dintr-o soluție software de editare a imaginilor nu este întotdeauna necesar. În calitate de designeri, am petrecut nenumărate ore adăugând efecte imaginilor cu instrumente precum Adobe Photoshop. Pe măsură ce parcurgeți acest tutorial, veți observa că multe dintre opțiuni seamănă cu cele din Photoshop, dar acum pot fi realizate cu eficiența stilului CSS.

Modurile de amestecare ale browserului vor elimina complet necesitatea unui software de editare a imaginilor? Nu în totalitate, și cu siguranță încă încă. Dar suportul pentru CSS și browser a parcurs un drum lung în sprijinirea noilor moduri de editare a imaginilor. Decuparea și mascarea CSS și SVG, modurile de amestecare, Transformarea 3D și multe altele pot reduce cu siguranță dependența pe care o avem de software-ul de editare a imaginilor. Pe măsură ce browserele devin mai sofisticate, vom vedea mult mai mult potențial și vom petrece (sperăm) mai puțin timp în Photoshop.

Moduri de amestec CSS și moduri de amestec CSS

Acest tutorial va acoperi modurile de amestec CSS și modul în care sunt utilizate. Pentru început, există câteva opțiuni diferite de care ar trebui să fii conștient. Unul este un efect cu background-blend-mode iar celălalt este cu mix-blend-mode .

Folosind background-blend-mode property , puteți amesteca straturile de fundal (imagine sau culoare) ale unui element. Modurile de amestecare sunt definite ca valoare și specifică cum să amestecați sau să amestecați culorile imaginii de fundal cu culoarea sau cu alte imagini de fundal din spatele acesteia.

Ce se întâmplă dacă vrei să faci niște amestecări, dar nu cu elemente de fundal? Elementele pot fi amestecate împreună folosind proprietatea mix-blend-mode . Această proprietate descrie modul în care ar trebui să fie amestecarea între elementele HTML stivuite. Elementele de pe straturile suprapuse se vor amesteca cu cele de sub ele. Orice imagini, text, chenaruri sau titluri vor fi influențate de această proprietate.

Exemplu de multiplicare Adobe Photoshop

Aruncând o privire asupra modului tradițional de a afișa modurile de amestecare într-un editor de imagini ne oferă o idee despre ceea ce putem realiza cu modurile de amestecare CSS. Următoarea fotografie a fost creată în Adobe Photoshop. Imaginea este pe propriul strat de fundal cu un strat roșu deasupra. A fost selectat un mod de amestecare pentru stratul roșu, care este „Multiplicare”. După cum puteți vedea, există o suprapunere roșie. Pentru a obține acest efect, Adobe Photoshop preia culorile din stratul care are aplicat „Multiplicare”, le înmulțește cu culorile de pe stratul(e) de sub acesta, apoi le împarte la 255 pentru a afișa rezultatul.

Același efect poate fi obținut cu CSS, permițând o personalizare mai rapidă și o actualizare ușoară.

Exemplu de bază al unui mod de amestec CSS

Un exemplu simplu pentru a vedea cum funcționează modurile de amestecare este amestecarea imaginii cu o background-color . Mai întâi, trebuie declarată calea URL către imagine, apoi specificată o culoare. După ce acestea au fost decise, trebuie ales modul de amestecare. Înmulțirea a fost selectată aici pentru a arăta modul în care acest mod de amestecare afectează aspectul background-image .

 .simple-blended { background-image: url(image.jpg); background-color: red; background-blend-mode: multiply; }

Un mod de amestecare este modul în care este calculată valoarea finală a culorii unui pixel atunci când straturile se suprapun. Fiecare mod de amestecare ia valoarea culorii primului plan și a fundalului (culoarea de sus și culoarea de jos), calculează valoarea acesteia și returnează o valoare de culoare. Stratul final vizibil este rezultatul calculului modului de amestecare pe fiecare pixel care se suprapune între straturile amestecate.

Multiply este un mod de amestecare foarte popular, dar există și alte opțiuni disponibile pentru modul de amestecare: ecran, suprapunere, întunecare, luminozitate, evitarea culorii, arderea culorilor, lumină tare, lumină moale, diferență, excludere, nuanță, saturație, culoare și luminozitate. Dacă este specificat „normal”, acest lucru va reseta lucrurile. În loc să parcurgeți detaliile fiecărui mod de amestecare unul câte unul, experimentarea cu acestea este cea mai bună modalitate de a determina care va fi rezultatul final.

Modul de amestecare a fundalului cu două imagini

În loc să aibă o suprapunere de culoare pe o imagine, stratificarea a două imagini împreună poate avea un efect destul de grozav. Este la fel de ușor ca și adăugarea a două imagini de fundal în declarația CSS. Următoarea alegere este să aveți o culoare de fundal (sau nu). Dacă nu doriți o culoare de fundal, aceasta poate fi eliminată și imaginile se vor amesteca împreună în funcție de modul de amestec pe care îl alegeți.

 .two-image-stacked { background-image: url("image.jpg"), url("image-2.jpg"); background-color: purple; background-blend-mode: lighten; }

Gradient pe modurile de amestecare de fundal

În loc să folosească doar o singură culoare, degradeurile pot oferi și unele efecte unice.

 .gradient-pe-imagine {
 fundal:
 gradient liniar (violet 0%, roșu 80%),
 gradient liniar(la dreapta, violet 0%, galben 100%), url("image.jpg");
 background-blend-mode: ecran, diferență, lumina;
 } 

Veți observa, de asemenea, că acest exemplu are mai multe moduri de amestecare de fundal. Dacă un singur mod de amestecare nu este suficient, pot fi utilizate mai multe.

Exemple de lucru pot fi găsite în acest Codepen.

Exemple de mod de amestecare

Până în acest moment, accentul a fost pus pe fundal. Ce se întâmplă dacă alte elemente de pe pagină doresc să profite de modurile de amestecare? Aceasta nu este o problemă și sunt disponibile aceleași tipuri de moduri de amestecare.

Lucrurile arată la fel din background-blend-modes cu excepția inițiale, moștenire și nesetate.

• Inițială: setare implicită a proprietății care nu setează un mod de amestecare.
• Moștenire: moștenește modul de amestecare din elementul părinte.
• Dezactivat: elimină modul de amestecare dintr-un element.

Exemplu de bază al unui mod de amestec mixt cu izolare

Când lucrați cu mix-blend-mode , veți întâlni nevoia de a face niște izolare. În primul rând, este important să știți că „stivuirea” este posibilă, iar acest lucru este valoros atunci când lucrați cu o mulțime de straturi. Gândiți-vă la un teanc de cutii. Fiecare cutie este separată de grup. În interiorul fiecărei cutii, pot exista mai multe straturi de articole. Acest mod de gândire va ajuta la determinarea a ceea ce trebuie izolat.

Mix de text și imagine cu modul Mix-mix

În acest exemplu, div -ul cu o clasă de img-wrap conține imaginea. Imaginea are un mix-blend-mode de înmulțire. Deci, practic, imaginea pare să cadă în fundal.

Pentru a preveni acest lucru, img-wrap div (conținând și textul titlului) ar trebui să fie un nou set de conținut stivuit, astfel încât să fie separat de fundalul elementului body. Acest lucru se face cu proprietatea de izolare. Valoarea implicită este auto, deci isolation: isolate; va trebui adăugată.

Pentru a testa acest lucru, comentați proprietatea de izolare pe div cu clasa .img-wrap și verificați rezultatul.

Iată codul HTML:

 <div class="img-wrap"> <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/01/blend-mode-original.jpg" /> <h2>Outdoor Club</h2> </div>

Aici este CSS-ul. Acordați o atenție deosebită isolate de pe .img-wrap .

 h2 { margin-bottom: 7rem; position: absolute; top: 45%; right: 0; left: 0; margin: auto; text-align: center; font-size: 4rem; padding: .5em .25em; color: #007eae; text-shadow: 2px 3px 3px #000; mix-blend-mode: overlay; } .img-wrap { width: 45%; padding: 1%; position: relative; isolation: isolate; margin: 0 auto; } .img-wrap img { max-width: 100%; mix-blend-mode: multiply; }

Exemplul de lucru poate fi găsit pe Codepen.

Decuparea textului cu modul de amestecare

Unele efecte de tip interesante pot fi create cu moduri de amestecare. Există o modalitate ușoară de a decupa textul. Fundalul este ascuns de o umplere pe elementul h1 .

Iată codul HTML:

 <div class="dark-cover"> <h1>Outdoor Club</h1> </div>

Acela care conține <div> este umplut cu imaginea de fundal a pădurii.

 .dark-cover { background-image: url(image.jpg); text-align: center; background-size: cover; }

Titlul din interiorul acestuia este decorat cu o culoare de fundal opțională. Titlul are un efect transparent cu imaginea de fundal semi-transparentă prin utilizarea mix-blend-mode de-multiplicare:

 .dark-cover h1 { margin: 0; font-size: 8rem; text-transform: uppercase; line-height: 1.9; color: #fff; background-color: green; mix-blend-mode: multiply; }

Exemplul de lucru poate fi găsit pe Codepen.

Modul de amestecare și SVG

Fișierele SVG sunt foarte populare pe web, iar modurile de amestecare CSS funcționează bine cu ele. Formele pot fi vizate cu ușurință pentru a le oferi modul de amestecare dorit.

Izolarea a fost cheia și în acest exemplu. Fără a izola cercurile, fundalul gri ar interfera.

Iată codul pentru a crea grupul de cerc:

 <svg> <g class="isolate"> <circle cx="60" cy="60" r="50" fill="red"/> <circle cx="100" cy="60" r="50" fill="lime"/> <circle cx="80" cy="100" r="50" fill="blue"/> </g> </svg>

Iată stilurile CSS:

 body { background: #898989; } circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* if this was not isolated, the gray background would impact the outcome */

Acest exemplu poate fi găsit pe Codepen.

Suport pentru browser pentru modul de amestecare de fundal și modul de amestecare

Suportul pentru browser este destul de bun, dar nu este complet consistent pentru modul de amestecare de fundal. Înainte de a începe un design care utilizează această caracteristică, asigurați-vă că bifați Can I Use. În prezent, Edge și Safari nu au suport. Pentru a face față unui suport limitat și în funcție de ce browsere trebuie să fie acceptate, o interogare de caracteristici CSS poate fi o opțiune bună. Dacă nu, gândirea la imagini „combinate” ca o îmbunătățire (nu o cerință) poate fi cel mai bun pariu.

Suportul pentru browser este puțin mai bun pentru modul mix-blend. Este bine să fii conștient de sprijinul parțial. De exemplu, Safari nu acceptă nuanța, saturația, culoarea sau luminozitatea.

Cel mai bun mod de a învăța cu adevărat despre ceea ce poate fi proiectat cu modurile de amestecare este să experimentezi. Exemplele prezentate aici tocmai au zgâriat suprafața. Este uimitor ce fel de grafică poate fi creată prin utilizarea modurilor de amestecare. Acesta este un mare pas înainte pentru ceea ce se poate face pe web.

Alimentați libertatea de a crea cu WP Engine

WP Engine oferă libertatea de a crea pe WordPress. Produsele companiei, cele mai rapide dintre toți furnizorii de WordPress, alimentează 1,5 milioane de experiențe digitale. Mai multe dintre primele 200.000 de site-uri din lume folosesc WP Engine pentru a-și alimenta experiențele digitale decât oricine altcineva din WordPress. Găsiți mai multe pe wpengine.com sau vorbiți cu un reprezentant astăzi!