Kuidas kasutada visuaalsete efektide loomiseks CSS-filtreid ja segamisrežiime

CSS-filter ja segamisrežiimid võimaldavad teil hõlpsasti oma veebilehele visuaalseid efekte rakendada. Filtrid on eelmääratletud CSS-i funktsioonide komplekt, mida kasutatakse piltide või muude HTML-i elementide renderdamise reguleerimiseks. Kuigi segamisrežiimid määravad, kuidas element peaks sulanduma oma tausta või naaberelementidega.

CSS-filtrite kasutamine

Rakendate CSS-filtreid kasutades filter atribuut ja atribuut, mis määrab rakendatud efekti tüübi. Iga filtri omadus on CSS-funktsioon, see töötab sarnaselt CSS-i muutujaga funktsiooni. See aktsepteerib parameetrit, mis määrab, kui palju filter peaks stiilielementi mõjutama.

HTML-elemendi stiili kujundamiseks on saadaval 10 CSS-filtri funktsiooni:

• hägu ()
• heledus ()
• kontrast()
• vari ()
• halltoonid ()
• toon-pööra ()
• invert()
• läbipaistmatus ()
• küllastunud ()
• seepia ()

Saate kasutada neid filtreid üksikult või koos, et luua ainulaadseid stiile ja täiustada oma HTML-elementide välimust.

Mõned neist filtritest töötavad õigel kasutamisel teistega palju paremini.

Siin on näited CSS-filtrite kombineerimisest, et saavutada pildielemendil erinevaid visuaalseid efekte.

1. Halltoonid ja seepia

The halltoonid () filter eemaldab pildilt või tekstielemendilt kogu värviteabe. Filter võtab väärtuse vahemikus 0 kuni 1, kusjuures 0 tähendab algset värvi ja 1 on täieliku halltoonide efekt.

The seepia () filter rakendab pildile või tekstielemendile seepia tooni efekti. Filter võtab ka väärtuse vahemikus 0 kuni 1.

Näiteks:

img {
filter: halltoonid(14%) seepia(30%);
}

Kombineerimine halltoonid () 14% juures ja seepia () 30% võib luua teie pildile vintage või retro efekti.

2. Pöörake ümber ja küllastage

The küllastunud () filter suurendab või vähendab pildi või tekstielemendi küllastust. Filter võtab väärtuse vahemikus 0 kuni lõpmatus, kusjuures 1 on algne värv ja kõrgemad väärtused suurendavad küllastust.

The invert() filter muudab pildi või tekstielemendi värvid ümber, pöörates värvirattal iga värvi tooni 180 kraadi võrra. See tähendab, et filter muudab elemendi heleduse ja küllastuse taset, säilitades samal ajal tooni.

Näiteks:

img {
filter: tagurpidi(30%) küllastama(75%);
}

See kood muudab pildi värvid ümber ja suurendab küllastust 75%.

3. Toon-pööra ja kontrast

The toon-pööra () filter pöörab pildi või tekstielemendi toone, mis tähendab, et see muudab elemendi üldist värvi, säilitades samal ajal heleduse ja küllastuse taseme. Pööramise määra saab määrata kraadides, kus 0 tähistab algset värvi ja 360 tähistab täielikku pööramist tagasi algsele värvile.

Kombineerides toon-pööra () ja kontrast() filtrid võivad luua teie piltidele elava ja värvilise efekti.

Näiteks:

img {
filter: toon-pööra(10deg) kontrast(150%);
}

Hue-rotate võib aktsepteerida väärtust deg, grad, rad, või keerata. Ülaltoodud kood pöörab pildi tooni 10 kraadi võrra ja tõstab kontrasti.

4. Heledus ja hägusus

Heleduse ja hägususe filtrid on vägagi iseenesestmõistetavad. Esimene reguleerib teie pildi heledust ja viimane rakendatud hägususe taset.

Kombineerides heledus () ja hägu () filtrid võivad luua teie piltidele unistava ja pehme efekti.

Näiteks:

img {
filter: heledus(0.8) hägusus(5px);
}

Ülaltoodud kood vähendab heledust võrra 0.8 (80%) ja rakendab a 5 pikslit pildi hägususe efekt.

5. Drop-Shadow ja läbipaistmatus

Varjuefekt on visuaalne efekt, mille puhul näib, et element heidab varju selle taga olevale pinnale, luues sügavuse ja mõõtmelisuse illusiooni. Tekstile või piltidele rakendatakse sageli varjundeid, et luua elemendi ja tausta eraldustunne.

Samal ajal kontrollib läbipaistmatuse filter elemendi läbipaistvust.

Kombineerides vari () ja läbipaistmatus () filtrid võivad luua teie tekstielementidele peene efekti.

Näiteks:

.tekst-efekt {
teisendada: tõlkida(-50%, -50%);
värvi: must;
vari-vari: 10px 9px 9pxbeež;
läbipaistmatus: 70%;
}

Selles näites asetseb langev vari 10 pikslit paremale ja 9 pikslit allapoole ning hägususe raadius on 9 pikslit. Varjuvärviks on määratud beež. Samuti on määratud 70% läbipaistmatus.

CSS-i segamisrežiimide kasutamine

CSS-i segamisrežiimid juhivad, kuidas elemendi sisu sulandub tausta või muude elementidega, võimaldades loomingulisi kompositsiooniefekte.

Mõned CSS-i segamisrežiimide kõige populaarsemad kasutusjuhud on järgmised:

• Gradientide loomine: loomiseks saab kasutada segamisrežiime mitu CSS-i taustagradienti seda värvide vahelist üleminekut, mis annab teile lihtsa ja tõhusa viisi oma kujundusele sügavuse ja mõõtmete lisamiseks.
• Tekstuuri lisamine: saate kasutada ka segamisrežiime, et lisada tekstuuri taustale, piltidele ja muudele lehe elementidele. See võib olla suurepärane viis ainulaadse välimuse loomiseks ja visuaalse huvi lisamiseks muidu lihtsatele elementidele.
• Värvide reguleerimine: segamisrežiimidega saate reguleerida lehe elementide värve, sealhulgas taustavärvide reguleerimine. See võimaldab teil hõlpsasti luua efekte, nagu värvilised ülekatted või toonitud kujutised.

Kaks kõige levinumat segamisrežiimi on tausta segamise režiim ja mix-blend-režiim. Mõlemal atribuudil on samad 15 väärtust: tavaline, korrutamine, ekraan, ülekate, tumenemine, heledamaks muutmine, värvimuutus, küllastus, värvipõletus, heledus, erinevus, kõva valgus, pehme valgus, välistamine ja toon.

Sa peaksid kasutama tausta segamise režiim kui teil on mitu taustapaigutust (nt elemendi taustapildid) ja soovite, et need kõik üksteisega sulanduks.

Võite kasutada ka mix-blend-režiim et segada antud elemendi sisu selle otsese vanema sisuga. The mix-blend-režiim kasutatakse tavaliselt esiplaani sisu, näiteks teksti, kujundite või piltide segamiseks.

Siin on näide kasutamisest mix-blend-režiim teksti ja pildi segamiseks.

HTML:

<divklass="konteiner">
<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="background-image"
 />
<divklass="sisu">
<h1>Tere tulemasth1>
<lk>Tere Kasutaja!lk>
div>
div>

CSS:

.konteiner {
positsiooni: absoluutne;
laius: 100%;
kõrgus: 100%;
}
.taustapilt {
laius: 100%;
kõrgus: 100%;
objektile sobiv: kaas;
}
.sisu {
positsiooni: absoluutne;
üleval: 50%;
vasakule: 50%;
teisendada: tõlkida(-50%, -50%);
teksti joondamine: Keskus;
mix-blend-režiim: erinevus;
}
h1 {
fondi suurus: 60px;
värvi: valge;
}
lk {
fondi suurus: 40px;
värvi: valge;
}

The erinevus segamisrežiim arvutab absoluutse erinevuse teksti ja aluseks oleva tumeda pildi värviväärtuste vahel.

Selle stsenaariumi korral suhtleb tekstivärv tumeda taustaga, mille tulemuseks on suure kontrastsuse efekt.

Filtrite ja segamisrežiimide kombineerimine

Saate kombineerida filtreid ja segamisrežiime, et luua visuaalselt veelgi huvitavamaid efekte. Mõlemat atribuuti koos kasutades saate saavutada ainulaadseid ja loomingulisi tulemusi, mida on raske teiste CSS-i atribuutidega korrata.

Siin on näide, mis ühendab filtri ja segamisrežiimi, et luua keerulisem efekt:

.minu-element {
filter: heledus(150%) toon-pööra(180deg) vari-vari(0px 0px 10pxrgba(0, 0, 0, 0.5));
mix-blend-režiim: ekraan;
}

See kood ühendab filtrid; heledus, toon-pööra, vari-varija a mix-blend-režiim väärtusega ekraan pildi juurde. See suurendab heledust 150%, samas kui hue-pööra pöörab pildi värve 180 kraadi võrra ümber.

Seejärel rakendatakse ka varju. Lõpuks, ekraan segamisrežiimi väärtus ühendab pildi värvid aluseks oleva taustaga, tulemuseks on efekt, kus heledamad värvid on intensiivistunud ja tumedamad värvid segunevad värvidega taustal.

Filtrite ja segamisrežiimide valdamine

Olete õppinud tundma erinevat tüüpi CSS-filtreid ja seda, kuidas saate neid oma HTML-elementidele rakendada. Kasutades erinevaid filtrifunktsioone, nagu hägusus, kontrastsus ja toonide pööramine, saate muuta oma piltide välimust. Olete näinud ka näiteid segamisrežiimide toimimisest ja sellest, kuidas neid saab kasutada ainulaadsete kujunduste loomiseks.

Kui katsetate nende tehnikatega rohkem, saate oma disainilahendustele visuaalset huvi pakkuda.