Filtrul CSS și modurile de amestecare sunt instrumente puternice pentru a aplica cu ușurință efecte vizuale uimitoare pe pagina dvs. web, fără a fi nevoie de cod complex.

Filtrul CSS și modurile de amestecare vă permit să aplicați cu ușurință efecte vizuale pe pagina dvs. web. Filtrele sunt un set de funcții CSS predefinite utilizate pentru a ajusta redarea imaginilor sau a altor elemente HTML. În timp ce modurile de amestecare determină modul în care un element ar trebui să se îmbine cu fundalul sau cu elementele învecinate.

Utilizarea filtrelor CSS

Aplicați filtre CSS utilizând filtru proprietate și o proprietate care specifică tipul de efect aplicat. Fiecare proprietate de filtru este o funcție CSS, adică funcționează similar cu o variabilă CSS funcţie. Acceptă un parametru pentru a specifica cât de mult ar trebui să afecteze filtrul elementul stilizat.

Există 10 funcții de filtrare CSS disponibile pentru a stila elementul HTML:

  • estompa()
  • luminozitate ()
  • contrast()
  • umbra()
  • scara tonurilor de gri()
  • rotire-nuanta()
  • inversa()
  • opacitate()
  • satura()
  • sepia()
instagram viewer

Puteți utiliza aceste filtre individual sau în combinație pentru a crea stiluri unice și pentru a îmbunătăți aspectul elementelor dvs. HTML.

Unele dintre aceste filtre funcționează mult mai bine cu altele atunci când sunt utilizate corect.

Iată exemple de combinare a filtrelor CSS pentru a obține diferite efecte vizuale asupra unui element de imagine.

1. Tonuri de gri și Sepia

The scara tonurilor de gri() filtrul elimină toate informațiile de culoare dintr-o imagine sau un element de text. Filtrul ia o valoare între 0 și 1, cu 0 însemnând culoarea originală și 1 fiind efectul complet în tonuri de gri.

The sepia() filtrul aplică un efect de ton sepia unei imagini sau unui element de text. De asemenea, filtrul ia o valoare între 0 și 1.

De exemplu:

img {
filtru: scara tonurilor de gri(14%) sepia(30%);
}

Combinând scara tonurilor de gri() la 14% și sepia() la 30% poate crea un efect vintage sau retro asupra imaginii tale.

2. Inversați și saturați

The satura() filtrul crește sau scade saturația unei imagini sau a unui element de text. Filtrul ia o valoare între 0 și infinit, 1 fiind culoarea originală, iar valorile mai mari cresc saturația.

The inversa() filtrul va inversa culorile unei imagini sau ale unui element de text, răsturnând nuanța fiecărei culori prezente cu 180 de grade pe roata de culori. Aceasta înseamnă că filtrul modifică nivelurile de luminozitate și saturație ale elementului, menținând în același timp nuanța.

De exemplu:

img {
filtru: inversa(30%) satura(75%);
}

Acest cod inversează culorile imaginii și crește saturația cu 75%.

3. Nuanță-Rotire și Contrast

The rotire-nuanta() filtrul rotește nuanțele unei imagini sau ale unui element de text, ceea ce înseamnă că schimbă culoarea generală a elementului, menținând în același timp nivelurile de luminozitate și saturație. Cantitatea de rotație poate fi specificată în grade, cu 0 reprezentând culoarea originală și 360 reprezentând o rotație completă înapoi la culoarea originală.

Combinând cele rotire-nuanta() și contrast() filtrele pot crea un efect vibrant și plin de culoare asupra imaginilor dvs.

De exemplu:

img {
filtru: nuanță-rotire(10deg) contrast(150%);
}

Rotirea nuanței poate accepta o valoare de deg, grad, rad, sau întoarce. Codul de mai sus rotește nuanța imaginii cu 10 grade și crește contrastul.

4. Luminozitate și estompare

Filtrele de luminozitate și de estompare se explică de la sine. Prima ajustează luminozitatea imaginii tale, iar cea din urmă controlează nivelul de estompare aplicat.

Combinând cele luminozitate () și estompa() filtrele pot crea un efect de vis și blând asupra imaginilor tale.

De exemplu:

img {
filtru: luminozitatea(0.8) estompa(5px);
}

Codul de mai sus scade luminozitatea cu 0.8 (80%) și aplică a 5px efect de estompare a imaginii.

5. Drop-Shadow și Opacitate

Un efect de umbră este un efect vizual în care un element pare să arunce o umbră pe suprafața din spatele lui, dând iluzia de profunzime și dimensionalitate. Umbrele sunt adesea aplicate textului sau imaginilor pentru a crea un sentiment de separare între element și fundal.

Între timp, filtrul de opacitate controlează transparența unui element.

Combinând cele umbra() și opacitate() filtrele pot crea un efect subtil asupra elementelor dvs. de text.

De exemplu:

.efect de text {
transforma: Traduceți(-50%, -50%);
culoare: negru;
umbra: 10px 9px 9pxbej;
opacitate: 70%;
}

În acest exemplu, umbra este poziționată la 10 pixeli la dreapta și la 9 pixeli în jos, cu o rază de estompare de 9 pixeli. Culoarea umbrei este specificată ca bej. De asemenea, este specificată o opacitate de 70%.

Utilizarea modurilor de amestec CSS

Modurile de amestecare CSS controlează modul în care conținutul unui element se îmbină cu fundalul sau cu alte elemente, permițând efecte creative de compoziție.

Unele dintre cele mai populare cazuri de utilizare pentru modurile de amestec CSS includ:

  • Crearea gradientelor: Modurile de amestecare pot fi folosite pentru a crea mai multe gradiente de fundal CSS această tranziție între culori, oferindu-vă o modalitate ușoară și eficientă de a adăuga profunzime și dimensiune design-urilor dvs.
  • Adăugarea de textură: De asemenea, puteți utiliza moduri de amestecare pentru a adăuga textură fundalurilor, imaginilor și altor elemente dintr-o pagină. Aceasta poate fi o modalitate excelentă de a crea un aspect unic și de a adăuga interes vizual elementelor altfel simple.
  • Reglarea culorilor: Cu modurile de amestecare, puteți ajusta culorile elementelor dintr-o pagină, inclusiv ajustarea culorilor de fundal. Acest lucru vă va permite să creați cu ușurință efecte precum suprapuneri de culoare sau imagini colorate.

Cele mai comune două moduri de amestecare sunt modul de amestecare de fundal și modul de amestecare. Ambele proprietăți împărtășesc aceleași 15 valori: normal, multiplicare, ecran, suprapunere, întunecare, luminare, evitare a culorii, saturație, ardere a culorii, luminozitate, diferență, lumină tare, lumină moale, excludere și nuanță.

Ar trebui să folosești modul de amestecare de fundal atunci când aveți mai multe machete de fundal, cum ar fi imagini de fundal pe un element, și doriți ca toate să se îmbine unele cu altele.

Ai putea folosi, de asemenea modul de amestecare pentru a amesteca conținutul unui element dat cu conținutul părintelui său direct. The modul de amestecare este de obicei folosit pentru a combina conținut din prim-plan, cum ar fi text, forme sau imagini.

Iată un exemplu de utilizare modul de amestecare pentru a amesteca text și imagine.

HTML:

<divclasă="container">
<img
 src=" https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
 class="imagine de fundal"
 />
<divclasă="conţinut">
<h1>Bine ati venith1>
<p>Salut utilizator!p>
div>
div>

CSS:

.container {
poziţie: absolut;
lăţime: 100%;
înălţime: 100%;
}
.imagine de fundal {
lăţime: 100%;
înălţime: 100%;
potrivire obiect: acoperi;
}


.conţinut {
poziţie: absolut;
top: 50%;
stânga: 50%;
transforma: Traduceți(-50%, -50%);
aliniere text: centru;
modul de amestecare: diferență;
}


h1 {
marimea fontului: 60px;
culoare: alb;
}
p {
marimea fontului: 40px;
culoare: alb;
}

The diferență modul de amestecare calculează diferența absolută dintre valorile de culoare ale textului și imaginea întunecată subiacentă.

În acest scenariu, culoarea textului ar interacționa cu fundalul întunecat, rezultând un efect de contrast ridicat.

Combinarea filtrelor și a modurilor de amestecare

Puteți combina filtre și moduri de amestecare pentru a crea efecte și mai interesante din punct de vedere vizual. Folosind ambele proprietăți împreună, puteți obține rezultate unice și creative, care sunt greu de replicat cu alte proprietăți CSS.

Iată un exemplu care combină filtrul și modul de amestecare pentru a crea un efect mai complex:

.elementul-meu {
filtru: luminozitatea(150%) nuanță-rotire(180deg) umbra(0px 0px 10pxrgba(0, 0, 0, 0.5));
modul de amestecare: ecran;
}

Acest cod combină filtrele; luminozitatea, nuanță-rotire, umbra, și a modul de amestecare de valoare ecran la imagine. Mărește luminozitatea cu 150%, în timp ce hue-rotate va inversa culorile imaginii cu 180 de grade.

Apoi, de asemenea, se aplică o umbră. În cele din urmă, ecran valoarea pentru modul de amestecare va combina culorile imaginii cu fundalul subiacent, rezultând un efect în care culorile mai deschise sunt intensificate, iar culorile mai închise sunt amestecate cu fundal.

Stăpânirea filtrelor și a modurilor de amestecare

Ați învățat despre diferitele tipuri de filtre CSS și cum le puteți aplica elementelor HTML. Folosind diferite funcții de filtru, cum ar fi estomparea, contrastul și rotirea nuanței, puteți modifica aspectul imaginilor. Ați văzut, de asemenea, exemple de moduri de amestecare în acțiune și cum pot fi folosite pentru a crea modele unice.

Dacă experimentați mai mult cu aceste tehnici, puteți adăuga un nivel suplimentar de interes vizual modelelor dvs.