CSS-filteret og blandingstilstandene er kraftfulde værktøjer til nemt at anvende fantastiske visuelle effekter på din webside uden behov for kompleks kode.

CSS-filteret og blandingstilstandene giver dig mulighed for nemt at anvende visuelle effekter på din webside. Filtre er et sæt foruddefinerede CSS-funktioner, der bruges til at justere gengivelsen af ​​billeder eller andre HTML-elementer. Mens blandingstilstande bestemmer, hvordan et element skal blandes med dets baggrund eller tilstødende elementer.

Brug af CSS-filtre

Du anvender CSS-filtre ved hjælp af filter egenskab og en egenskab, der angiver den anvendte effekttype. Hver filteregenskab er en CSS-funktion, dvs fungerer på samme måde som en CSS-variabel fungere. Det accepterer en parameter til at angive, hvor meget filteret skal påvirke det stylede element.

Der er 10 CSS-filterfunktioner tilgængelige til at style dit HTML-element:

  • sløring()
  • lysstyrke()
  • kontrast()
  • drop-shadow()
  • gråtoner()
  • hue-rotate()
  • inverter()
  • Gennemsigtighed()
  • mætte()
  • sepia()
instagram viewer

Du kan bruge disse filtre individuelt eller i kombination til at skabe unikke stilarter og forbedre udseendet af dine HTML-elementer.

Nogle af disse filtre fungerer meget bedre sammen med andre, når de bruges på den rigtige måde.

Her er eksempler på at kombinere CSS-filtre for at opnå forskellige visuelle effekter på et billedelement.

1. Gråtoner og sepia

Det gråtoner() filter fjerner al farveinformation fra et billede eller tekstelement. Filteret har en værdi mellem 0 og 1, hvor 0 betyder den originale farve og 1 er den fulde gråtoneeffekt.

Det sepia() filter anvender en sepia-toneeffekt på et billede eller tekstelement. Filteret har også en værdi mellem 0 og 1.

For eksempel:

img {
filter: gråtoner(14%) sepia(30%);
}

Kombinerer gråtoner() på 14 % og sepia() ved 30% kan skabe en vintage eller retro effekt på dit billede.

2. Vend og mæt

Det mætte() filter øger eller mindsker mætningen af ​​et billede eller et tekstelement. Filteret har en værdi mellem 0 og uendelig, hvor 1 er den originale farve og højere værdier øger mætning.

Det inverter() filter vil invertere farverne på et billede eller tekstelement ved at vende nuancen af ​​hver farve, der er til stede, 180 grader på farvehjulet. Det betyder, at filteret ændrer elementets lysstyrke og mætningsniveau, samtidig med at nuancen bevares.

For eksempel:

img {
filter: vende om(30%) mætte(75%);
}

Denne kode inverterer farverne på billedet og øger farvemætningen med 75 %.

3. Hue-Rotate og Contrast

Det hue-rotate() filteret roterer nuancerne af et billede eller tekstelement, hvilket betyder, at det ændrer elementets overordnede farve, mens lysstyrken og mætningsniveauerne bevares. Mængden af ​​rotation kan angives i grader, hvor 0 repræsenterer den oprindelige farve og 360 repræsenterer en fuld rotation tilbage til den oprindelige farve.

Ved at kombinere hue-rotate() og kontrast() filtre kan skabe en levende og farverig effekt på dine billeder.

For eksempel:

img {
filter: nuance-rotere(10deg) kontrast(150%);
}

Hue-rotate kan acceptere en værdi på deg, grad, rad, eller tur. Ovenstående kode roterer billedets nuance med 10 grader og hæver kontrasten.

4. Lysstyrke og sløring

Lysstyrke- og sløringsfiltrene er meget selvforklarende. Den første justerer lysstyrken på dit billede, og den sidste kontrollerer sløringsniveauet.

Ved at kombinere lysstyrke() og sløring() filtre kan skabe en drømmende og blød effekt på dine billeder.

For eksempel:

img {
filter: lysstyrke(0.8) sløring(5px);
}

Ovenstående kode reducerer lysstyrken med 0.8 (80%) og gælder en 5 px sløringseffekt på billedet.

5. Drop-Shadow og Opacitet

En drop shadow-effekt er en visuel effekt, hvor et element ser ud til at kaste en skygge på overfladen bag sig, hvilket giver en illusion af dybde og dimensionalitet. Slagskygger anvendes ofte på tekst eller billeder for at skabe en følelse af adskillelse mellem elementet og baggrunden.

I mellemtiden styrer opacitetsfilteret gennemsigtigheden af ​​et element.

Ved at kombinere drop-shadow() og Gennemsigtighed() filtre kan skabe en subtil effekt på dine tekstelementer.

For eksempel:

.tekst-effekt {
transformere: Oversætte(-50%, -50%);
farve: sort;
skygge: 10px 9px 9pxbeige;
Gennemsigtighed: 70%;
}

I dette eksempel er skyggen placeret 10 pixels til højre og 9 pixels til bunden med en sløringsradius på 9 pixels. Skyggefarven er angivet som beige. Der er også angivet en opacitet på 70 %.

Brug af CSS-blandingstilstande

CSS-blandingstilstande styrer, hvordan et elements indhold blandes med baggrunden eller andre elementer, hvilket giver mulighed for kreative kompositionseffekter.

Nogle af de mest populære use cases for CSS-blandingstilstande inkluderer:

  • Oprettelse af gradienter: Blandingstilstande kan bruges til at skabe flere CSS baggrundsgradienter den overgang mellem farver, hvilket giver dig en nem og effektiv måde at tilføje dybde og dimension til dine designs.
  • Tilføjelse af tekstur: Du kan også bruge blandingstilstande til at tilføje tekstur til baggrunde, billeder og andre elementer på en side. Dette kan være en fantastisk måde at skabe et unikt look og tilføje visuel interesse til ellers almindelige elementer.
  • Justering af farver: Med blandingstilstande kan du justere farverne på elementer på en side, herunder justering af baggrundsfarver. Dette giver dig mulighed for nemt at skabe effekter såsom farveoverlejringer eller tonede billeder.

De to mest almindelige blandingstilstande er baggrundsblandingstilstand og mix-blend-tilstand. Begge egenskaber deler de samme 15 værdier: normal, multiplicer, skærm, overlejring, mørkere, lysere, farve-undvige, mætning, farve-brænding, lysstyrke, forskel, hårdt-lys, blødt-lys, ekskludering og nuance.

Du bør bruge baggrundsblandingstilstand når du har flere baggrundslayouts, som baggrundsbilleder på et element, og vil have dem alle til at smelte ind i hinanden.

Du kan også bruge mix-blend-tilstand at blande indholdet af et givet element med indholdet af dets direkte overordnede. Det mix-blend-tilstand bruges typisk til at blande forgrundsindhold såsom tekst, former eller billeder.

Her er et eksempel på brug mix-blend-tilstand at blande tekst og billede.

HTML:

<divklasse="beholder">
<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="baggrundsbillede"
 />
<divklasse="indhold">
<h1>Velkommenh1>
<s>Hej bruger!s>
div>
div>

CSS:

.beholder {
position: absolut;
bredde: 100%;
højde: 100%;
}
.baggrundsbillede {
bredde: 100%;
højde: 100%;
objekttilpasning: dække over;
}


.indhold {
position: absolut;
top: 50%;
venstre: 50%;
transformere: Oversætte(-50%, -50%);
tekstjustering: centrum;
mix-blend-tilstand: forskel;
}


h1 {
skriftstørrelse: 60px;
farve: hvid;
}
s {
skriftstørrelse: 40px;
farve: hvid;
}

Det forskel blandingstilstand beregner den absolutte forskel mellem farveværdierne for teksten og det underliggende mørke billede.

I dette scenarie vil tekstfarven interagere med den mørke baggrund, hvilket resulterer i en høj kontrasteffekt.

Kombination af filtre og blandingstilstande

Du kan kombinere filtre og blandingstilstande for at skabe endnu mere visuelt interessante effekter. Ved at bruge begge egenskaber sammen kan du opnå unikke og kreative resultater, som er svære at kopiere med andre CSS-egenskaber.

Her er et eksempel, der kombinerer filter- og blandingstilstanden for at skabe en mere kompleks effekt:

.mit-element {
filter: lysstyrke(150%) nuance-rotere(180deg) skygge(0px 0px 10pxrgba(0, 0, 0, 0.5));
mix-blend-tilstand: skærmen;
}

Denne kode kombinerer filtrene; lysstyrke, nuance-rotere, skygge, og en mix-blend-tilstand af værdi skærmen til billedet. Det øger lysstyrken med 150 %, mens hue-rotere vil invertere farverne på billedet 180 grader.

Derefter påføres også en skygge. Til sidst skærmen værdi for blandingstilstanden vil kombinere farverne på billedet med den underliggende baggrund, resulterer i en effekt, hvor lysere farver forstærkes, og mørkere farver blandes med baggrund.

Mestring af filtre og blandingstilstande

Du har lært om de forskellige typer CSS-filtre, og hvordan du kan anvende dem på dine HTML-elementer. Ved at bruge forskellige filterfunktioner såsom sløring, kontrast og nuance-rotation kan du ændre udseendet af dine billeder. Du har også set eksempler på blandingstilstande i aktion, og hvordan de kan bruges til at skabe unikke designs.

Hvis du eksperimenterer mere med disse teknikker, kan du tilføje et ekstra niveau af visuel interesse til dine designs.