Kā izmantot CSS filtrus un sajaukšanas režīmus, lai izveidotu vizuālos efektus

CSS filtrs un sajaukšanas režīmi ļauj ērti lietot vizuālos efektus jūsu tīmekļa lapai. Filtri ir iepriekš definētu CSS funkciju kopa, ko izmanto, lai pielāgotu attēlu vai citu HTML elementu renderēšanu. Sajaukšanas režīmi nosaka, kā elementam jāsaplūst ar tā fonu vai blakus esošajiem elementiem.

Izmantojot CSS filtrus

Jūs lietojat CSS filtrus, izmantojot filtru rekvizītu un rekvizītu, kas norāda lietotā efekta veidu. Katrs filtra rekvizīts ir CSS funkcija, kas darbojas līdzīgi kā CSS mainīgais funkciju. Tas pieņem parametru, lai norādītu, cik lielā mērā filtram ir jāietekmē stila elements.

Ir pieejamas 10 CSS filtra funkcijas, lai veidotu HTML elementa stilu:

• izpludināt ()
• spilgtums ()
• kontrasts ()
• ēnas ()
• pelēktoņu ()
• nokrāsa-pagriezt ()
• invert()
• necaurredzamība ()
• piesātināts ()
• sēpija ()

Varat izmantot šos filtrus atsevišķi vai kopā, lai izveidotu unikālus stilus un uzlabotu HTML elementu izskatu.

Daži no šiem filtriem darbojas daudz labāk ar citiem, ja tos izmanto pareizi.

Šeit ir piemēri, kā apvienot CSS filtrus, lai attēla elementā iegūtu dažādus vizuālos efektus.

1. Pelēktoņi un sēpija

The pelēktoņu () filtrs noņem visu krāsu informāciju no attēla vai teksta elementa. Filtra vērtība ir no 0 līdz 1, kur 0 nozīmē sākotnējo krāsu un 1 ir pilnas pelēktoņu efekts.

The sēpija () filtrs attēlam vai teksta elementam piemēro sēpijas toņa efektu. Filtrs arī ņem vērtību no 0 līdz 1.

Piemēram:

img {
filtru: pelēktoņu(14%) sēpija(30%);
}

Apvienojot pelēktoņu () pie 14% un sēpija () 30% var radīt jūsu attēlam vintage vai retro efektu.

2. Apgriezt un piesātināt

The piesātināts () filtrs palielina vai samazina attēla vai teksta elementa piesātinājumu. Filtra vērtība ir no 0 līdz bezgalībai, kur 1 ir sākotnējā krāsa un augstākas vērtības palielina piesātinājumu.

The invert() filtrs apvērsīs attēla vai teksta elementa krāsas, krāsu aplī pagriežot katras krāsas nokrāsu par 180 grādiem. Tas nozīmē, ka filtrs maina elementa spilgtuma un piesātinājuma līmeni, vienlaikus saglabājot nokrāsu.

Piemēram:

img {
filtru: apgriezt(30%) piesātināts(75%);
}

Šis kods apvērš attēla krāsas un palielina piesātinājumu par 75%.

3. Nokrāsa — pagriezt un kontrastēt

The nokrāsa-pagriezt () filtrs rotē attēla vai teksta elementa nokrāsas, kas nozīmē, ka tas maina elementa kopējo krāsu, vienlaikus saglabājot spilgtuma un piesātinājuma līmeni. Rotācijas apjomu var norādīt grādos, kur 0 apzīmē sākotnējo krāsu un 360 apzīmē pilnu pagriešanu atpakaļ uz sākotnējo krāsu.

Apvienojot nokrāsa-pagriezt () un kontrasts () filtri var radīt dinamisku un krāsainu efektu jūsu attēliem.

Piemēram:

img {
filtru: nokrāsa-pagriezt(10gr) kontrasts(150%);
}

Hue-rotate var pieņemt vērtību gr, grad, rad, vai pagrieziens. Iepriekš minētais kods pagriež attēla nokrāsu par 10 grādiem un palielina kontrastu.

4. Spilgtums un izplūšana

Spilgtuma un izplūšanas filtri ir ļoti pašsaprotami. Pirmais regulē attēla spilgtumu, bet otrais kontrolē izmantotā izplūšanas līmeni.

Apvienojot spilgtums () un izpludināt () filtri var radīt sapņainu un maigu efektu jūsu attēliem.

Piemēram:

img {
filtru: spilgtumu(0.8) aizmiglot(5px);
}

Iepriekš minētais kods samazina spilgtumu par 0.8 (80%) un piemēro a 5 pikseļi attēla izplūduma efekts.

5. Drop-ēna un necaurredzamība

Piliena ēnas efekts ir vizuāls efekts, kurā šķiet, ka elements met ēnu uz virsmu aiz tā, radot dziļuma un dimensijas ilūziju. Krītošās ēnas bieži tiek lietotas tekstam vai attēliem, lai radītu atdalīšanas sajūtu starp elementu un fonu.

Tikmēr necaurredzamības filtrs kontrolē elementa caurspīdīgumu.

Apvienojot ēnas () un necaurredzamība () filtri var radīt smalku efektu uz jūsu teksta elementiem.

Piemēram:

.teksta efekts {
pārveidot: tulkot(-50%, -50%);
krāsa: melns;
ēnas: 10px 9px 9pxbēšs;
necaurredzamība: 70%;
}

Šajā piemērā krītošā ēna ir novietota 10 pikseļus pa labi un 9 pikseļus apakšā, un izplūšanas rādiuss ir 9 pikseļi. Ēnu krāsa ir norādīta kā bēša. Ir norādīta arī necaurredzamība 70%.

CSS sajaukšanas režīmu izmantošana

CSS sapludināšanas režīmi kontrolē, kā elementa saturs sajaucas ar fonu vai citiem elementiem, ļaujot radīt radošus kompozīcijas efektus.

Daži no populārākajiem CSS sajaukšanas režīmu lietošanas gadījumiem ir šādi:

• Gradientu izveide: izveidošanai var izmantot sapludināšanas režīmus vairāki CSS fona gradienti šī pāreja starp krāsām, sniedzot jums vienkāršu un efektīvu veidu, kā pievienot dizainam dziļumu un dimensiju.
• Tekstūras pievienošana: Varat arī izmantot sajaukšanas režīmus, lai pievienotu tekstūru foniem, attēliem un citiem lapas elementiem. Tas var būt lielisks veids, kā izveidot unikālu izskatu un pievienot vizuālu interesi citādi vienkāršiem elementiem.
• Krāsu pielāgošana: izmantojot sapludināšanas režīmus, varat pielāgot lapas elementu krāsas, tostarp fona krāsu pielāgošana. Tas ļaus jums viegli izveidot efektus, piemēram, krāsu pārklājumus vai tonētus attēlus.

Divi visizplatītākie sajaukšanas režīmi ir fona sajaukšanas režīms un mix-blend-režīms. Abiem rekvizītiem ir vienādas 15 vērtības: normāls, reizināšana, ekrāns, pārklājums, tumšāka, gaišāka, krāsu izvairīšanās, piesātinājums, krāsas iedegums, spilgtums, atšķirība, cieta gaisma, mīksta gaisma, izslēgšana un nokrāsa.

Jums vajadzētu izmantot fona sajaukšanas režīms ja jums ir vairāki fona izkārtojumi, piemēram, fona attēli uz elementa, un vēlaties, lai tie visi saplūstu viens ar otru.

Jūs varētu izmantot arī mix-blend-režīms lai sajauktu dotā elementa saturu ar tā tiešā vecāka satura saturu. The mix-blend-režīms parasti izmanto, lai sapludinātu priekšplāna saturu, piemēram, tekstu, formas vai attēlus.

Šeit ir lietošanas piemērs mix-blend-režīms lai sajauktu tekstu un attēlu.

HTML:

<divklasē="konteiners">
<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="fona attēls"
 />
<divklasē="saturs">
<h1>Laipni lūdzamh1>
<lpp>Sveiks Lietotāj!lpp>
div>
div>

CSS:

.konteiners {
pozīciju: absolūts;
platums: 100%;
augstums: 100%;
}
.fona attēls {
platums: 100%;
augstums: 100%;
objektam piemērots: piesegt;
}
.saturs {
pozīciju: absolūts;
tops: 50%;
pa kreisi: 50%;
pārveidot: tulkot(-50%, -50%);
teksta līdzināšana: centrs;
mix-blend-režīms: atšķirība;
}
h1 {
fonta izmērs: 60px;
krāsa: balts;
}
lpp {
fonta izmērs: 40px;
krāsa: balts;
}

The atšķirība sajaukšanas režīms aprēķina absolūto atšķirību starp teksta un pamatā esošā tumšā attēla krāsu vērtībām.

Šādā gadījumā teksta krāsa mijiedarbotos ar tumšo fonu, radot augsta kontrasta efektu.

Filtru un sajaukšanas režīmu apvienošana

Varat kombinēt filtrus un sapludināšanas režīmus, lai radītu vēl vizuāli interesantākus efektus. Izmantojot abus rekvizītus kopā, varat sasniegt unikālus un radošus rezultātus, kurus ir grūti atkārtot ar citiem CSS rekvizītiem.

Tālāk ir sniegts piemērs, kas apvieno filtra un sajaukšanas režīmu, lai izveidotu sarežģītāku efektu.

.mans elements {
filtru: spilgtumu(150%) nokrāsa-pagriezt(180gr) ēnas(0px 0px 10pxrgba(0, 0, 0, 0.5));
mix-blend-režīms: ekrāns;
}

Šis kods apvieno filtrus; spilgtumu, nokrāsa-pagriezt, ēnasun a mix-blend-režīms vērtību ekrāns uz attēlu. Tas palielina spilgtumu par 150%, savukārt hue-rotate apvērsīs attēla krāsas par 180 grādiem.

Pēc tam tiek uzklāta arī pilināmā ēna. Visbeidzot, ekrāns sajaukšanas režīma vērtība apvienos attēla krāsas ar pamatā esošo fonu, iegūstot efektu, kurā gaišākas krāsas tiek pastiprinātas un tumšākas krāsas tiek sajauktas ar fons.

Filtru un sajaukšanas režīmu apgūšana

Jūs esat uzzinājis par dažādiem CSS filtru veidiem un to, kā tos lietot saviem HTML elementiem. Izmantojot dažādas filtra funkcijas, piemēram, izplūšanu, kontrastu un nokrāsu pagriešanu, varat mainīt attēlu izskatu. Jūs esat redzējis arī sajaukšanas režīmu piemērus darbībā un to, kā tos var izmantot, lai izveidotu unikālus dizainus.

Ja vairāk eksperimentējat ar šīm metodēm, varat saviem dizainiem pievienot papildu vizuālās intereses līmeni.