CSS-filteret og blandingsmodusene er kraftige verktøy for enkelt å bruke fantastiske visuelle effekter på nettsiden din uten behov for kompleks kode.

CSS-filteret og blandingsmodusene lar deg enkelt bruke visuelle effekter på nettsiden din. Filtre er et sett med forhåndsdefinerte CSS-funksjoner som brukes til å justere gjengivelsen av bilder eller andre HTML-elementer. Mens blandingsmoduser bestemmer hvordan et element skal blande seg med bakgrunnen eller naboelementene.

Bruke CSS-filtre

Du bruker CSS-filtre ved å bruke filter egenskap og en egenskap som spesifiserer den anvendte effekttypen. Hver filteregenskap er en CSS-funksjon, altså fungerer på samme måte som en CSS-variabel funksjon. Den godtar en parameter for å spesifisere hvor mye filteret skal påvirke det stilede elementet.

Det er 10 CSS-filterfunksjoner tilgjengelig for å style HTML-elementet ditt:

  • uklarhet()
  • lysstyrke()
  • kontrast()
  • drop-shadow()
  • gråtoner()
  • hue-rotate()
  • inverter()
  • opasitet()
  • mette()
  • sepia()

Du kan bruke disse filtrene individuelt eller i kombinasjon for å lage unike stiler og forbedre utseendet til HTML-elementene dine.

instagram viewer

Noen av disse filtrene fungerer mye bedre med andre når de brukes på riktig måte.

Her er eksempler på å kombinere CSS-filtre for å oppnå ulike visuelle effekter på et bildeelement.

1. Gråtoner og sepia

De gråtoner() filter fjerner all fargeinformasjon fra et bilde eller tekstelement. Filteret tar en verdi mellom 0 og 1, hvor 0 betyr den opprinnelige fargen og 1 er hele gråtoneeffekten.

De sepia() filteret bruker en sepia-toneeffekt på et bilde eller tekstelement. Filteret har også en verdi mellom 0 og 1.

For eksempel:

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

Kombinere gråtoner() på 14 % og sepia() ved 30 % kan skape en vintage- eller retroeffekt på bildet ditt.

2. Inverter og mett

De mette() filter øker eller reduserer metningen til et bilde eller et tekstelement. Filteret tar en verdi mellom 0 og uendelig, hvor 1 er den opprinnelige fargen og høyere verdier øker metningen.

De inverter() filteret vil invertere fargene til et bilde eller tekstelement ved å snu nyansen til hver farge som er tilstede 180 grader på fargehjulet. Dette betyr at filteret endrer lysstyrken og metningsnivåene til elementet samtidig som fargetonen opprettholdes.

For eksempel:

img {
filter: invertere(30%) mette(75%);
}

Denne koden inverterer fargene på bildet og øker metningen med 75 %.

3. Hue-Rotate og Contrast

De hue-rotate() filteret roterer fargene til et bilde eller tekstelement, noe som betyr at det endrer den generelle fargen på elementet samtidig som lysstyrken og metningsnivåene opprettholdes. Mengden av rotasjon kan spesifiseres i grader, hvor 0 representerer den opprinnelige fargen og 360 representerer en full rotasjon tilbake til den opprinnelige fargen.

Å kombinere hue-rotate() og kontrast() filtre kan skape en levende og fargerik effekt på bildene dine.

For eksempel:

img {
filter: nyanse-rotere(10grader) kontrast(150%);
}

Hue-rotate kan godta en verdi på grader, grad, rad, eller sving. Koden ovenfor roterer fargen på bildet med 10 grader og øker kontrasten.

4. Lysstyrke og uskarphet

Lysstyrke- og uskarphetfiltrene er veldig selvforklarende. Den første justerer lysstyrken på bildet ditt, og den siste kontrollerer nivået av uskarphet som brukes.

Å kombinere lysstyrke() og uklarhet() filtre kan skape en drømmende og myk effekt på bildene dine.

For eksempel:

img {
filter: lysstyrke(0.8) uklarhet(5px);
}

Koden ovenfor reduserer lysstyrken med 0.8 (80%) og gjelder en 5 px uskarphet effekt på bildet.

5. Drop-Shadow og opasitet

En skyggeeffekt er en visuell effekt der et element ser ut til å kaste en skygge på overflaten bak det, og gir en illusjon av dybde og dimensjonalitet. Slagskygger brukes ofte på tekst eller bilder for å skape en følelse av separasjon mellom elementet og bakgrunnen.

I mellomtiden kontrollerer opasitetsfilteret gjennomsiktigheten til et element.

Å kombinere drop-shadow() og opasitet() filtre kan skape en subtil effekt på tekstelementene dine.

For eksempel:

.tekst-effekt {
forvandle: oversette(-50%, -50%);
farge: svart;
drop-shadow: 10px 9px 9pxbeige;
opasitet: 70%;
}

I dette eksemplet er skyggen plassert 10 piksler til høyre og 9 piksler nederst, med en uskarphet på 9 piksler. Skyggefargen er spesifisert som beige. En opasitet på 70 % er også spesifisert.

Bruke CSS-blandingsmoduser

CSS-blandingsmoduser kontrollerer hvordan innholdet til et element blandes med bakgrunnen eller andre elementer, noe som gir kreative komposisjonseffekter.

Noen av de mest populære brukstilfellene for CSS-blandingsmoduser inkluderer:

  • Lage gradienter: Blandingsmoduser kan brukes til å lage flere CSS bakgrunnsgradienter denne overgangen mellom farger, noe som gir deg en enkel og effektiv måte å legge til dybde og dimensjon til designene dine.
  • Legger til tekstur: Du kan også bruke blandingsmoduser for å legge til tekstur til bakgrunner, bilder og andre elementer på en side. Dette kan være en fin måte å skape et unikt utseende og legge til visuell interesse til ellers enkle elementer.
  • Justering av farger: Med blandingsmoduser kan du justere fargene på elementer på en side, inkludert justering av bakgrunnsfarger. Dette lar deg enkelt lage effekter som fargeoverlegg eller tonede bilder.

De to vanligste blandingsmodusene er bakgrunnsblandingsmodus og blande-blanding-modus. Begge egenskapene deler de samme 15 verdiene: normal, multipliser, skjerm, overlegg, mørkere, lysere, farge-unnvike, metning, fargebrenning, lysstyrke, forskjell, hardt lys, mykt lys, ekskludering og fargetone.

Du bør bruke bakgrunnsblandingsmodus når du har flere bakgrunnsoppsett, som bakgrunnsbilder på et element, og vil at alle skal gli inn i hverandre.

Du kan også bruke blande-blanding-modus å blande innholdet i et gitt element med innholdet til dets direkte overordnede. De blande-blanding-modus brukes vanligvis til å blande forgrunnsinnhold som tekst, former eller bilder.

Her er et eksempel på bruk blande-blanding-modus å blande tekst og bilde.

HTML:

<divklasse="container">
<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"
 />
<divklasse="innhold">
<h1>Velkommenh1>
<s>Hei bruker!s>
div>
div>

CSS:

.container {
posisjon: absolutt;
bredde: 100%;
høyde: 100%;
}
.bakgrunnsbilde {
bredde: 100%;
høyde: 100%;
objekttilpasning: dekke;
}


.innhold {
posisjon: absolutt;
topp: 50%;
venstre: 50%;
forvandle: oversette(-50%, -50%);
tekstjustering: senter;
blande-blanding-modus: forskjell;
}


h1 {
skriftstørrelse: 60px;
farge: hvit;
}
s {
skriftstørrelse: 40px;
farge: hvit;
}

De forskjell blandingsmodus beregner den absolutte forskjellen mellom fargeverdiene til teksten og det underliggende mørke bildet.

I dette scenariet vil tekstfargen samhandle med den mørke bakgrunnen, noe som resulterer i en høy kontrasteffekt.

Kombinere filtre og blandingsmoduser

Du kan kombinere filtre og blandingsmoduser for å lage enda mer visuelt interessante effekter. Ved å bruke begge egenskapene sammen kan du oppnå unike og kreative resultater som er vanskelige å replikere med andre CSS-egenskaper.

Her er et eksempel som kombinerer filter- og blandingsmodus for å skape en mer kompleks effekt:

.mitt-element {
filter: lysstyrke(150%) nyanse-rotere(180grader) drop-shadow(0px 0px 10pxrgba(0, 0, 0, 0.5));
blande-blanding-modus: skjerm;
}

Denne koden kombinerer filtrene; lysstyrke, nyanse-rotere, drop-shadow, og en blande-blanding-modus av verdi skjerm til bildet. Den øker lysstyrken med 150 %, mens hue-rotere vil invertere fargene på bildet 180 grader.

Deretter påføres også en fallskygge. Til slutt, den skjerm verdien for blandingsmodus vil kombinere fargene på bildet med den underliggende bakgrunnen, resulterer i en effekt der lysere farger forsterkes, og mørkere farger blandes med bakgrunn.

Mestring av filtre og blandingsmoduser

Du har lært om de forskjellige typene CSS-filtre og hvordan du kan bruke dem på HTML-elementene dine. Ved å bruke ulike filterfunksjoner som uskarphet, kontrast og nyanserotering, kan du endre utseendet til bildene dine. Du har også sett eksempler på blandingsmodi i aksjon og hvordan de kan brukes til å lage unike design.

Hvis du eksperimenterer mer med disse teknikkene, kan du legge til et ekstra nivå av visuell interesse for designene dine.