Modurile de amestecare în css

Una dintre cele mai prețioase funcții ale Photoshop este modul de amestecare. Modurile de combinare iau doi pixeli aranjate pe unul de altul și să le combine în diferite moduri, de exemplu, modul de culoare mai închisă de amestecare prezintă pur și simplu mai închisă a doi pixeli. Atunci când imaginile întregi sunt amestecate, modurile de amestecare pot produce un efect uimitor.

Acum poți să o faci dinamic și cu CSS3.

Suport pentru browser

În prezent, browserele suportă proprietățile modului de amestecare de fundal a CSS se îmbunătățește treptat. Versiunile anterioare ale browserelor ar necesita prefixe sau activarea funcțiilor experimentale. nu este clar încă să sprijine IE, ci ca moduri de amestecare - accesoriu progresivă, puteți începe tratarea lor ca și alte browsere (actualizate la cele mai recente versiuni).

Cum se utilizează modul de amestecare în fundal

În CSS3, există multe opțiuni pentru modul de amestecare, dar cel mai util pentru scopurile noastre este modul de amestecare în fundal. Această proprietate ne permite să amestecăm două imagini sau o imagine și o culoare de fundal.

Iată codul de care avem nevoie:

Și aici este CSS de bază:

Suntem gata să adăugăm moduri de amestecare.

Pentru a face acest lucru, vom adăuga o altă clasă a div, de exemplu "se înmulțește":

Apoi vom crea o regulă de stil secund:

Înmulțire - înmulțește pixelul principal cu culoarea de amestecare, rezultând o culoare mai închisă. Multiplicarea prin negru este rezultatul culorii negre, iar multiplicarea culorii albe este o imagine constanta.

ecranul multiplică inversarea culorii cu doi pixeli. ecranul este opusul multiplicării și folosirea unui fundal alb va duce la o imagine albă, iar fundalul negru va lăsa imaginea neschimbată.

Suprapunerea este un mod complex de amestecare. Înmulțirea depinde de culoarea primară: culorile luminoase devin mai ușoare, culorile mai întunecate devin mai întunecate.

Darken întunecă imaginea. Se uită la cei doi pixeli care se suprapun și selectează cel mai întunecat dintre cei doi.

Spre deosebire de Darkening-light, iluminează imaginea prin compararea a doi pixeli care se suprapun și selecționează una care este mai ușoară dintre cele două.

Color Dodge-

Echilibrul de culoare (color-dodge) împodobește culoarea principală pentru a reflecta culoarea amestecului, reducând în același timp contrastul.

Culoare-ardere

Color-burn - opusul culorii-dodge - întunecă culoarea principală, ducând la o creștere a contrastului.

Hard-lumină

Se aprinde lumina puternică (greu luminos) sau se înmulțește sau se creează culori în funcție de culoarea amestecului. Dacă amestecarea este mai ușoară de 50% gri, imaginea va fi iluminată, altfel va fi întunecată. Aceasta este o modalitate foarte bună de a îmbunătăți selecția și umbrele din imagine.

Soft-lumină

Lumina slabă (lumină moale) este similară cu strălucirea luminii. dar în loc de multiplicare sau de screening culori, este folosit pentru un efect mai subtil.

diferență

Diferența compară doi pixeli care se suprapun și scade o culoare cu o strălucire mai mare decât cealaltă.

Articole similare

Pagina anterioară

Pagina următoare