Kako koristiti CSS filtre i načine stapanja za stvaranje vizualnih efekata

CSS filter i načini stapanja omogućuju jednostavnu primjenu vizualnih efekata na vašu web stranicu. Filtri su skup unaprijed definiranih CSS funkcija koje se koriste za podešavanje prikaza slika ili drugih HTML elemenata. Dok načini stapanja određuju kako bi se element trebao stopiti sa svojom pozadinom ili susjednim elementima.

Korištenje CSS filtera

CSS filtre primjenjujete pomoću filtar svojstvo i svojstvo koje specificira primijenjenu vrstu učinka. Svako svojstvo filtra je CSS funkcija, tj radi slično kao CSS varijabla funkcija. Prihvaća parametar za određivanje koliko filtar treba utjecati na stilizirani element.

Dostupno je 10 funkcija CSS filtera za stiliziranje vašeg HTML elementa:

• zamutiti ()
• svjetlina()
• kontrast()
• padajuća sjena()
• sivi tonovi ()
• hue-rotate()
• preokrenuti ()
• neprozirnost()
• zasititi()
• sepija()

Ove filtre možete koristiti pojedinačno ili u kombinaciji kako biste stvorili jedinstvene stilove i poboljšali izgled svojih HTML elemenata.

Neki od ovih filtara rade puno bolje s drugima kada se koriste na pravi način.

Evo primjera kombiniranja CSS filtara za postizanje različitih vizualnih efekata na elementu slike.

1. Nijanse sive i sepija

The sivi tonovi () filter uklanja sve informacije o boji sa slike ili tekstualnog elementa. Filtar ima vrijednost između 0 i 1, pri čemu 0 znači izvornu boju, a 1 puni efekt sivih tonova.

The sepija() filtar primjenjuje efekt sepije na element slike ili teksta. Filtar također uzima vrijednost između 0 i 1.

Na primjer:

img {
filtar: sive nijanse(14%) sepija(30%);
}

Kombiniranje sivi tonovi () na 14% i sepija() na 30% može stvoriti vintage ili retro efekt na vašoj slici.

2. Invertirajte i zasićite

The zasititi() filter povećava ili smanjuje zasićenost slike ili tekstualnog elementa. Filtar uzima vrijednost između 0 i beskonačno, pri čemu je 1 izvorna boja, a veće vrijednosti povećavaju zasićenost.

The preokrenuti () filter će invertirati boje slike ili tekstualnog elementa okretanjem nijanse svake prisutne boje za 180 stupnjeva na kotačiću boja. To znači da filtar mijenja svjetlinu i razine zasićenosti elementa dok zadržava nijansu.

Na primjer:

img {
filtar: preokrenuti(30%) zasititi(75%);
}

Ovaj kod invertira boje slike i povećava zasićenost za 75%.

3. Hue-Rotate i Contrast

The hue-rotate() filtar rotira nijanse slike ili tekstualnog elementa, što znači da mijenja ukupnu boju elementa dok zadržava svjetlinu i razine zasićenja. Količina rotacije može se odrediti u stupnjevima, pri čemu 0 predstavlja izvornu boju, a 360 predstavlja punu rotaciju natrag na izvornu boju.

Kombinirajući hue-rotate() i kontrast() filtri mogu stvoriti živopisan i šaren efekt na vašim slikama.

Na primjer:

img {
filtar: rotiranje nijanse(10stupanj) kontrast(150%);
}

Hue-rotate može prihvatiti vrijednost od stupanj, dipl, rad, ili skretanje. Gornji kod rotira nijansu slike za 10 stupnjeva i povećava kontrast.

4. Svjetlina i zamućenje

Filtri svjetline i zamućenja vrlo su jasni sami po sebi. Prvi podešava svjetlinu vaše slike, a drugi kontrolira primijenjenu razinu zamućenja.

Kombinirajući svjetlina() i zamutiti () filtri mogu stvoriti sanjiv i mekan učinak na vašim slikama.

Na primjer:

img {
filtar: svjetlina(0.8) zamutiti(5px);
}

Gornji kod smanjuje svjetlinu za 0.8 (80%) i primjenjuje se a 5 px efekt zamućenja na slici.

5. Sjena i neprozirnost

Efekt sjene je vizualni efekt u kojem se čini da element baca sjenu na površinu iza sebe, dajući iluziju dubine i dimenzionalnosti. Sjene se često primjenjuju na tekst ili slike kako bi se stvorio osjećaj odvojenosti između elementa i pozadine.

U međuvremenu, filtar neprozirnosti kontrolira prozirnost elementa.

Kombinirajući padajuća sjena() i neprozirnost() filtri mogu stvoriti suptilan učinak na vaše elemente teksta.

Na primjer:

.tekst-efekt {
transformirati: Prevedi(-50%, -50%);
boja: crno;
padajuća sjena: 10px 9px 9pxbež;
neprozirnost: 70%;
}

U ovom primjeru, padajuća sjena postavljena je 10 piksela udesno i 9 piksela dolje, s radijusom zamućenja od 9 piksela. Boja sjene navedena je kao bež. Također je određena neprozirnost od 70%.

Korištenje CSS načina miješanja

CSS načini stapanja kontroliraju kako se sadržaj elementa stapa s pozadinom ili drugim elementima, dopuštajući efekte kreativne kompozicije.

Neki od najpopularnijih slučajeva upotrebe CSS načina stapanja uključuju:

• Stvaranje gradijenata: Načini stapanja mogu se koristiti za stvaranje nekoliko CSS pozadinskih gradijenata taj prijelaz između boja, dajući vam jednostavan i učinkovit način dodavanja dubine i dimenzije vašem dizajnu.
• Dodavanje teksture: Također možete koristiti načine stapanja za dodavanje teksture pozadini, slikama i drugim elementima na stranici. Ovo može biti sjajan način za stvaranje jedinstvenog izgleda i dodavanje vizualnog interesa inače običnim elementima.
• Podešavanje boja: s načinima stapanja možete prilagoditi boje elemenata na stranici, uključujući podešavanje boja pozadine. To će vam omogućiti jednostavno stvaranje efekata kao što su slojevi boja ili tonirane slike.

Dva najčešća načina stapanja su način miješanja pozadine i mix-blend-mode. Oba svojstva dijele istih 15 vrijednosti: normalno, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color-burn, luminosity, difference, hard-light, soft-light, exclusion i hue.

Trebali biste koristiti način miješanja pozadine kada imate više pozadinskih izgleda, poput pozadinskih slika na elementu, i želite da se sve stope jedna s drugom.

Također možete koristiti mix-blend-mode za spajanje sadržaja danog elementa sa sadržajem njegovog izravnog roditelja. The mix-blend-mode obično se koristi za spajanje sadržaja u prvom planu kao što su tekst, oblici ili slike.

Evo primjera korištenja mix-blend-mode za spajanje teksta i slike.

HTML:

<divrazreda="kontejner">
<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="pozadinska slika"
 />
<divrazreda="sadržaj">
<h1>Dobrodošlih1>
<str>Pozdrav korisniče!str>
div>
div>

CSS:

.kontejner {
položaj: apsolutni;
širina: 100%;
visina: 100%;
}
.pozadinska slika {
širina: 100%;
visina: 100%;
pristajanje objekta: pokriti;
}
.sadržaj {
položaj: apsolutni;
vrh: 50%;
lijevo: 50%;
transformirati: Prevedi(-50%, -50%);
poravnanje teksta: centar;
mix-blend-mode: razlika;
}
h1 {
veličina fonta: 60px;
boja: bijela;
}
str {
veličina fonta: 40px;
boja: bijela;
}

The razlika način stapanja izračunava apsolutnu razliku između vrijednosti boja teksta i donje tamne slike.

U ovom bi scenariju boja teksta bila u interakciji s tamnom pozadinom, što bi rezultiralo efektom visokog kontrasta.

Kombiniranje filtara i načina miješanja

Možete kombinirati filtre i načine stapanja kako biste stvorili još vizualno zanimljivije efekte. Koristeći oba svojstva zajedno, možete postići jedinstvene i kreativne rezultate koje je teško replicirati s drugim CSS svojstvima.

Evo primjera koji kombinira filtar i način stapanja za stvaranje složenijeg učinka:

.moj-element {
filtar: svjetlina(150%) rotiranje nijanse(180stupanj) padajuća sjena(0px 0px 10pxrgba(0, 0, 0, 0.5));
mix-blend-mode: zaslon;
}

Ovaj kod kombinira filtre; svjetlina, rotiranje nijanse, padajuća sjena, i a mix-blend-mode vrijednosti zaslon na sliku. Povećava svjetlinu za 150%, dok hue-rotirati će invertirati boje slike za 180 stupnjeva.

Zatim se također nanosi sjena. Na kraju, zaslon vrijednost za način stapanja kombinirat će boje slike s donjom pozadinom, što rezultira učinkom gdje su svjetlije boje intenzivirane, a tamnije boje stapane s pozadina.

Ovladavanje filtrima i načinima stapanja

Naučili ste o različitim vrstama CSS filtara i kako ih možete primijeniti na svoje HTML elemente. Korištenjem raznih funkcija filtra kao što su zamućenje, kontrast i rotiranje nijansi, možete promijeniti izgled svojih slika. Također ste vidjeli primjere načina stapanja na djelu i kako se mogu koristiti za stvaranje jedinstvenih dizajna.

Ako više eksperimentirate s ovim tehnikama, možete svojim dizajnima dodati dodatnu razinu vizualnog interesa.