Filter CSS in način mešanja sta zmogljiva orodja za preprosto uporabo osupljivih vizualnih učinkov na vaši spletni strani brez potrebe po zapleteni kodi.

Filter CSS in načini mešanja vam omogočajo preprosto uporabo vizualnih učinkov na vaši spletni strani. Filtri so nabor vnaprej določenih funkcij CSS, ki se uporabljajo za prilagajanje upodabljanja slik ali drugih elementov HTML. Medtem ko načini mešanja določajo, kako naj se element zlije z ozadjem ali sosednjimi elementi.

Uporaba filtrov CSS

Filtre CSS uporabite z uporabo filter lastnost in lastnost, ki določa vrsto uporabljenega učinka. Vsaka lastnost filtra je funkcija CSS, tj deluje podobno kot spremenljivka CSS funkcijo. Sprejema parameter, ki določa, koliko naj filter vpliva na stiliziran element.

Za oblikovanje vašega elementa HTML je na voljo 10 funkcij filtra CSS:

  • zameglitev()
  • svetlost()
  • kontrast()
  • padajoča senca()
  • sivine()
  • hue-rotate()
  • obrni()
  • motnost ()
  • nasičiti ()
  • sepija ()

Te filtre lahko uporabite posamično ali v kombinaciji, da ustvarite edinstvene sloge in izboljšate videz svojih elementov HTML.

instagram viewer

Nekateri od teh filtrov delujejo veliko bolje z drugimi, če se uporabljajo na pravi način.

Tu so primeri kombiniranja filtrov CSS za doseganje različnih vizualnih učinkov na slikovnem elementu.

1. Sivine in sepija

The sivine() filter odstrani vse informacije o barvi s slike ali besedilnega elementa. Filter ima vrednost med 0 in 1, pri čemer 0 pomeni prvotno barvo, 1 pa polni učinek sivine.

The sepija () filter uporabi učinek tona sepije na element slike ali besedila. Filter ima tudi vrednost med 0 in 1.

Na primer:

img {
filter: sivine(14%) sepija(30%);
}

Kombiniranje sivine() pri 14 % in sepija () pri 30 % lahko na vaši podobi ustvari vintage ali retro učinek.

2. Obrni in nasiči

The nasičiti () filter poveča ali zmanjša nasičenost slike ali besedilnega elementa. Filter ima vrednost med 0 in neskončnostjo, pri čemer je 1 izvirna barva, višje vrednosti pa povečajo nasičenost.

The obrni() filter obrne barve slike ali besedilnega elementa tako, da obrne odtenek vsake prisotne barve za 180 stopinj na barvnem kolesu. To pomeni, da filter spremeni svetlost in ravni nasičenosti elementa, hkrati pa ohrani odtenek.

Na primer:

img {
filter: obrniti(30%) nasičiti(75%);
}

Ta koda obrne barve slike in poveča nasičenost za 75 %.

3. Hue-Rotate in Contrast

The hue-rotate() filter zasuka odtenke slike ali besedilnega elementa, kar pomeni, da spremeni celotno barvo elementa, hkrati pa ohranja ravni svetlosti in nasičenosti. Količina rotacije se lahko določi v stopinjah, pri čemer 0 predstavlja prvotno barvo in 360 predstavlja popolno rotacijo nazaj na prvotno barvo.

Združevanje hue-rotate() in kontrast() filtri lahko na vaših slikah ustvarijo živahen in barvit učinek.

Na primer:

img {
filter: zavrtenje odtenka(10deg) kontrast(150%);
}

Hue-rotate lahko sprejme vrednost deg, grad, rad, oz obrat. Zgornja koda zavrti odtenek slike za 10 stopinj in poveča kontrast.

4. Svetlost in zamegljenost

Filtri za svetlost in zamegljenost so zelo razumljivi. Prvi prilagaja svetlost vaše slike, drugi pa nadzoruje uporabljeno stopnjo zamegljenosti.

Združevanje svetlost() in zameglitev() filtri lahko na vaših slikah ustvarijo sanjski in mehak učinek.

Na primer:

img {
filter: svetlost(0.8) zamegljenost(5px);
}

Zgornja koda zmanjša svetlost za 0.8 (80%) in velja a 5px učinek zamegljenosti slike.

5. Senčenje in motnost

Učinek padajoče sence je vizualni učinek, pri katerem se zdi, da element meče senco na površino za seboj, kar daje iluzijo globine in dimenzionalnosti. Sence se pogosto uporabljajo za besedilo ali slike, da ustvarijo občutek ločitve med elementom in ozadjem.

Medtem pa filter motnosti nadzira prosojnost elementa.

Združevanje padajoča senca() in motnost () filtri lahko ustvarijo subtilen učinek na vaše besedilne elemente.

Na primer:

.besedilni učinek {
transformirati: prevesti(-50%, -50%);
barva: Črna;
padajoča senca: 10px 9px 9pxbež;
nepreglednost: 70%;
}

V tem primeru je padajoča senca postavljena 10 slikovnih pik na desno in 9 slikovnih pik na dno, s polmerom zameglitve 9 slikovnih pik. Barva sence je določena kot bež. Določena je tudi motnost 70 %.

Uporaba načinov mešanja CSS

Načini mešanja CSS nadzirajo, kako se vsebina elementa zlije z ozadjem ali drugimi elementi, kar omogoča ustvarjalne učinke kompozicije.

Nekateri izmed najbolj priljubljenih primerov uporabe načinov mešanja CSS vključujejo:

  • Ustvarjanje gradientov: za ustvarjanje je mogoče uporabiti načine mešanja več prelivov ozadja CSS ta prehod med barvami, kar vam omogoča enostaven in učinkovit način, da svojim dizajnom dodate globino in dimenzijo.
  • Dodajanje teksture: Načine mešanja lahko uporabite tudi za dodajanje teksture ozadjem, slikam in drugim elementom na strani. To je lahko odličen način za ustvarjanje edinstvenega videza in dodajanje vizualnega zanimanja sicer navadnim elementom.
  • Prilagajanje barv: Z načini mešanja lahko prilagodite barve elementov na strani, vključno z prilagajanje barv ozadja. To vam bo omogočilo preprosto ustvarjanje učinkov, kot so barvni prekrivki ali obarvane slike.

Dva najpogostejša načina mešanja sta način mešanja ozadja in mix-blend-mode. Obe lastnosti imata istih 15 vrednosti: normalno, pomnožitev, zaslon, prekrivanje, temnenje, posvetlitev, izmikanje barve, nasičenost, zažganost barve, svetilnost, razlika, trda svetloba, mehka svetloba, izključitev in odtenek.

Moral bi uporabiti način mešanja ozadja ko imate več postavitev ozadja, na primer slike ozadja na elementu, in želite, da se vse zlijejo druga z drugo.

Uporabite lahko tudi mix-blend-mode za mešanje vsebine danega elementa z vsebino njegovega neposrednega starša. The mix-blend-mode se običajno uporablja za mešanje vsebine v ospredju, kot so besedilo, oblike ali slike.

Tukaj je primer uporabe mix-blend-mode za mešanje besedila in slike.

HTML:

<divrazred="posoda">
<img
 src=" https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=stisni&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="background-image"
 />
<divrazred="vsebina">
<h1>dobrodošlih1>
<str>Pozdravljeni uporabnik!str>
div>
div>

CSS:

.posoda {
položaj: absolutno;
premer: 100%;
višina: 100%;
}
.slika ozadja {
premer: 100%;
višina: 100%;
prileganje objektu: pokrov;
}


.vsebina {
položaj: absolutno;
vrh: 50%;
levo: 50%;
transformirati: prevesti(-50%, -50%);
poravnava besedila: center;
mix-blend-mode: Razlika;
}


h1 {
velikost pisave: 60px;
barva: bela;
}
str {
velikost pisave: 40px;
barva: bela;
}

The Razlika način mešanja izračuna absolutno razliko med barvnimi vrednostmi besedila in spodnje temne slike.

V tem scenariju bi barva besedila vplivala na temno ozadje, kar bi povzročilo učinek visokega kontrasta.

Združevanje filtrov in načinov mešanja

Kombinirate lahko filtre in načine mešanja, da ustvarite še bolj vizualno zanimive učinke. Če obe lastnosti uporabljate skupaj, lahko dosežete edinstvene in ustvarjalne rezultate, ki jih je težko posnemati z drugimi lastnostmi CSS.

Tukaj je primer, ki združuje filter in način mešanja za ustvarjanje bolj zapletenega učinka:

.my-element {
filter: svetlost(150%) zavrtenje odtenka(180deg) padajoča senca(0px 0px 10pxrgba(0, 0, 0, 0.5));
mix-blend-mode: zaslon;
}

Ta koda združuje filtre; svetlost, zavrtenje odtenka, padajoča sencain a mix-blend-mode vrednosti zaslon na sliko. Poveča svetlost za 150 %, medtem ko hue-vrtenje bo obrnil barve slike za 180 stopinj.

Nato se uporabi tudi senca. Nazadnje, zaslon vrednost za način mešanja bo združila barve slike z osnovnim ozadjem, kar ima za posledico učinek, kjer so svetlejše barve intenzivnejše, temnejše barve pa se mešajo z ozadje.

Obvladovanje filtrov in načinov mešanja

Naučili ste se o različnih vrstah filtrov CSS in o tem, kako jih lahko uporabite za svoje elemente HTML. Z uporabo različnih funkcij filtra, kot so zamegljenost, kontrast in vrtenje odtenkov, lahko spremenite videz svojih slik. Videli ste tudi primere načinov mešanja v akciji in kako jih je mogoče uporabiti za ustvarjanje edinstvenih modelov.

Če boste več eksperimentirali s temi tehnikami, lahko svojim dizajnom dodate dodatno raven vizualnega zanimanja.