Hvordan legge til filtre og refleksjoner til bilder i CSS?

Utseende av et nettsted er svært avgjørende hvis du har tenkt å tiltrekke flere og flere publikum til nettstedet ditt. Derfor anbefales det å forbedre det generelle utseendet til et nettsteds tillegg av grafiske effekter på bilder eller reflektere bilder. CSS gir forskjellige egenskaper som lar deg oppfylle disse oppgavene med letthet. Vi har diskutert disse egenskapene i detalj i denne oppskrivningen. I dette innlegget har vi diskutert følgende.

1. Bildefilter i CSS
2. Bilderefleksjoner i CSS

Bildefilter i CSS

For å legge til forskjellige spesialeffekter til et bilde som opacitet, uskarphet, metning osv., Brukes CSS -filteregenskapen.

Syntaks

Filter: verdi;

De forskjellige metodene som er assosiert med filteregenskapen er forklart nedenfor.

Verdi	Beskrivelse
ingen	Denne verdien tilfører ingen effekt og er en standardverdi.
uklarhet	Det tilfører uskarphet til bildet og gjengir verdi i piksler.
lysstyrke	Det brukes til å øke eller redusere lysstyrken til et bilde og utstille verdier i prosent.
kontrast	Denne verdien innstiller kontrasten til et bilde og verdier er definert i prosent.
Grayscale	Det forvandler et bilde til et gråtonebilde og viser også verdier i prosent.
Hue-rotate	Denne verdien brukes til å rotere et bilde og gjengir verdier i grader.
invertere	Det inverterer prøvene som finnes i bildet og verdiene er definert i prosent.
Opacitet	Denne verdien justerer gjennomsiktigheten til et bilde og tar verdier fra 0 til 1.
mett	Det metter et bilde ved å ta verdier i prosent.
sepia	Denne verdien brukes til å konvertere et bilde til sepia og utstille verdier i prosent.
Drop-shadow	Det brukes til å bruke en skyggeeffekt på bildet.
URL ()	Det er en funksjon som krever plassering av et XML -dokument som inneholder et SVG -filter og kan gi en lenke til et bestemt filterelement.
første	Denne verdien gir egenskapen sin opprinnelige verdi.
arve	Denne verdien arver filteregenskapen fra stamfarens element.

Nå som du vet alle verdiene som en filteregenskap kan utvise, har vi nedenfor demonstrert disse verdiene for en bedre forståelse.

Først og fremst, la oss legge til et bilde på vår webside ved hjelp av grunnleggende HTML.

Html

Her har vi ganske enkelt lagt til et bilde ved hjelp av taggen.

CSS

IMG
Bredde: 30%;
Høyde: Auto;

Nå bruker vi grunnleggende CSS for å gi litt bredde og høyde til bildet.

Produksjon

Bildet er lagt til på websiden.

La oss nå bruke filtre på dette bildet og utforske de forskjellige verdiene som filteregenskapen kan utvise.

Uklarhet

Vi har satt uskarphetseffekten til 2px. Jo mer verdi av uskarphetsmetoden vil øke uskarpheten.

.uklarhet
filter: uskarphet (2px);

Produksjon

Dette er et uskarpt bilde.

Lysstyrke

Lysstyrken på bildet er satt til 0.50. En reduksjon i verdien vil føre til et fall i lysstyrken og omvendt.

.lysstyrke
Filter: lysstyrke (0.50);

Produksjon

Lysstyrken på bildet er blitt justert med hell.

Kontrast

Vi har satt kontrasten til bildet til 160%. Hvis du vil øke kontrasten, så øke verdien så mye du ønsker.

.kontrast
Filter: kontrast (160%);

Produksjon

En kontrasteffekt tilsatt med stor letthet.

Grayscale

La oss gi Grayscale () -metoden en viss verdi og se endringene i bildet.

.Grayscale
Filter: Grayscale (100%);

Produksjon

Et farget bilde ble konvertert til et svart -hvitt bilde ved hjelp av gråtonemetoden () metoden til filteregenskapen.

Hue-rotate

Vi tildeler fargetrotatemetoden 270 grader. Denne metoden endrer i utgangspunktet bildene ved å rotere bildet rundt fargekretsen.

.Hue-rotate
Filter: Hue-rotate (270deg);

Produksjon

Dette er et bilde med fargetone på 270 grader.

Invertere

Verdien til omvendelsen tilfører en viss spesiell effekt på bildet ved å invertere den. Her inverterer vi bildet 80%.

.inverter
Filter: inverter (80%);

Produksjon

Prøvene på bildet er omvendt.

Opacitet

For å gjøre et bilde gjennomsiktig opacitetsverdi brukes. Nedenfor justerer vi opaciteten til bildet til 0.4. Jo mindre verdien av opacitet, jo mer blir bildet gjennomsiktig.

.opacitet
Filter: Opacitet (0.4);

Produksjon

Dette er et bilde med 40% åpenhet.

Mett

For å tilsette metning brukes metning () -metoden for filteregenskap. Jo mer verdien, jo mer vil være metningen av bildet.

.mett
Filter: Mett (4);

Produksjon

Metningseffekten ble vellykket lagt til bildet.

Sepia

For å legge til en sepia -effekt til bildet, gi den en viss verdi som vi har tildelt den 50% i kodebiten nedenfor.

.sepia
Filter: Sepia (50%);

Produksjon

Sepia -effekten fungerer som den skal.

Drop-shadow

For å legge til en skygge bruker vi drop-shadow-metoden. Lengden på skyggen er tildelt hver side av bildet.

.skygge
Filter: Drop-Shadow (8px 8px 10px rød);

Produksjon

Drop-shadow-effekten ble lagt til.

Nå som vi har lært om filteregenskapen, la oss komme videre og se hva som gjenspeiler eiendommen er.

Bilderefleksjoner i CSS

For å reflektere av bilder brukes CSS-boks-refleksjonseiendommen.

Syntaks

-Webkit-box-Reflect: nedenfor | over | høyre | venstre;

For at denne egenskapen skal fungere fullt ut i forskjellige nettlesere, brukes den med et prefiks "-Webkit-".

Merk: Firefox-nettleseren støtter ikke eiendommen.

Nedenfor har vi demonstrert noen av disse verdiene ved hjelp av relevante eksempler, slik at du kan ta tak i begrepet image refleksjon.

La oss først legge til et bilde på websiden vår.

Html

Her har vi lagt til et bilde og gitt det litt bredde og høyde.

Produksjon

Et bilde ble satt inn på websiden.

Under

Bare tilordne boksen-Reflect-egenskapen "nedenfor" for å gjenspeile et bilde under det originale bildet.

IMG
-Webkit-box-Reflect: nedenfor;

Produksjon

Bildet er reflektert nedenfor.

Ikke sant

La oss utforske den "riktige" verdien av eiendommen.

IMG
-Webkit-box-Reflect: Right;

Produksjon

Bildet ble vellykket reflektert til høyre.

Konklusjon

For å legge til spesialeffekter til bildene som vises på nettsteder, brukes CSS -filteregenskapen. Ulike metoder som denne egenskapen kan utvise er; Grayscale (), Saturate (), Opacity (), Blur (), lysstyrke (), Hue-rotate (), etc. I tillegg til å legge til spesialeffekter, kan du også gjenspeile bilder ved hjelp av CSS-boksen-Reflect-egenskapen til enten høyre, venstre, over eller nedenfor. Dette innlegget dekker alle dypet av å legge til filtre eller refleksjoner til bilder ved hjelp av relevante eksempler.