CSS er full av alternativer for å forbedre utseendet til nettsidene dine; tekst- og boksskygger er gode eksempler. De tilbyr lignende resultater som skyggene som finnes i bilderedigeringsprogramvare som Photoshop.

Men hvordan fungerer CSS-skygger? La oss dykke rett inn.

Slik bruker du CSS Box Shadow

Du kan bruke en CSS-boksskygge med en enkelt linje med CSS som inneholder et område på opptil seks verdier. Rekkefølgen av verdier er avgjørende for at CSS-boksskyggen din skal fungere, og den ser slik ut:

box-shadow: offset-x offset-y blur spredning farge innsatt;

La oss ta en titt på hver av verdiene i rekkefølge.

CSS Box Shadow Position

Offset-x- og offset-y-verdiene styrer posisjonen til boksskyggen din. Offset-x-verdien representerer den horisontale posisjonen til skyggen, mens offset-y er den vertikale offset.

 box-shadow: 10px 10px;

Positive verdier resulterer i en skygge under og til høyre for elementet.

Du kan også bruke negative verdier for h-offset og v-offset:

 box-shadow: -10px -10px;

En negativ h-offset flytter skyggen til venstre, mens en negativ v-offset flytter den oppover:

instagram viewer

CSS Box Shadow Blur

Som du kan se, vil det å legge til h-offset og v-offset i skyggen din skape en solid skygge uten noen fjæring. Uskarphet-verdien gjør CSS-boksskyggen uskarp og trer i kraft hvis du oppgir en tredje verdi:

box-shadow: 10px 10px 20px;

Jo høyere tallet du legger til uskarphetverdien, desto mer uskarp blir CSS-boksskyggen din. Denne verdien kan ikke være negativ.

CSS Box Shadow Spread

Spredningsverdien lar deg endre størrelsen på skyggen uten å endre posisjonen.

 box-shadow: 10px 10px 20px 30px;

En positiv spredningsverdi vil gjøre CSS-boksskyggen større, mens en negativ verdi vil gjøre den mindre.

CSS Box Shadow Color

CSS-boksskygger har som standard elementets tekstfarge, men du kan overstyre det ved å legge til en farge:

boks-skygge: 10px 10px 20px 10px #0000ff;

Fargen du bruker må være i et lovlig CSS-fargeformat, som en hex-kode, RGB-kode eller forhåndsdefinert farge. Du kan lære om hex-koder og andre lovlige CSS-fargealternativer før du kommer i gang med skyggene dine.

CSS Box Shadow Inset

CSS-boksskygger faller som standard utenfor det tilordnede elementet. Ved å legge til et innfelt i box-shadow-egenskapen kan du vise skyggen på innsiden av elementet.

boks-skygge: 10px 10px 20px 10px #0000ff innfelt;

Dette er en forhåndsdefinert tekstverdi; bare legg til eller fjern den for å angi verdien.

Hvordan bruke CSS Text Shadow

CSS-tekstskygger er som boksskygger, selv om de har færre verdier å endre. Syntaksen for en CSS-tekstskygge ser slik ut:

tekst-skygge: offset-x offset-y blur-radius farge;

Men hvordan fungerer disse verdiene?

CSS-tekstskyggeposisjon

CSS-tekstskyggeforskyvninger fungerer veldig likt de samme boksskyggeverdiene:

tekst-skygge: 10px 10px;

Positive verdier vil plassere skyggen under og til høyre for teksten.

Negative verdier gjør det motsatte, og plasserer skyggen over og til venstre for teksten.

 tekst-skygge: -10px -10px;

Du kan blande negative og positive verdier for å plassere CSS-tekstskyggen perfekt.

CSS Text Shadow Blur Radius

CSS-tekstskyggesløringsradius lar deg gjøre skyggen bak teksten uskarp.

tekst-skygge: 10px 10px 10px;

Standardverdien for denne verdien er 0 (ingen uskarphet).

CSS tekstskyggefarge

Som standard samsvarer CSS-tekstskygger med fargen på teksten. Du kan endre fargen på teksten din ved å legge den til på slutten av CSS-tekstskyggeegenskapen.

tekst-skygge: 10px 10px 10px #0000ff;

Som CSS-boksskyggefarger må du bruke en lovlig CSS-farge for dette.

Eksempler på CSS-boks og tekstskyggedesign

Du kan begynne å eksperimentere med bruken av CSS-bokser og tekstskygger når du forstår det grunnleggende. Ideene nedenfor bør inspirere deg til å komme opp med dine egne kreative måter å bruke disse CSS-egenskapene på.

Kanter i to farger med to CSS-boksskygger

Du kan legge til mer enn én boksskygge eller tekstskygge til et HTML-element. Så lenge de har kommaer mellom seg, kan du legge til nye skygger til en enkelt egenskap.

boks-skygge: 30px 30px#0000ff, -30 piksler-30 piksler 0px#00ff00;

Denne tofargede kanten er et godt eksempel på dette. To CSS-boksskygger med motsatte posisjoner og ingen uskarphet/spredning gir en utmerket kreativ kant.

Doble CSS-tekstskygger for dramatisk effekt

På samme måte som ideen ovenfor, kan du legge til og plassere tekst i flere tekstskygger for interessante resultater.

tekst-skygge: 35px 20px 4px mørkegrå, -35px -20px 4px mørkegrå;

Dette eksemplet viser en tekstlinje med en skygge over og en skygge under, som begge har tekstbaserte fargeverdier.

Flerfargede bakgrunner med innfelte CSS-boksskygger

CSS er kraftig nok til å lage unike og interessante eiendeler uten eksterne filer. Å bruke en innfelt CSS-boksskygge som bakgrunn er et godt eksempel på dette.

boks-skygge: 20px 10px 10px 40px #000000 innfelt, -50px -30px 8px 60px grått innfelt, 30px 20px 6px 90px lysegrå innfelt;

Denne boksen har en hvit bakgrunn, sammen med tre innfelte skygger i forskjellige farger. Skyggene overlapper hverandre for å skape en unik bakgrunn.

Å forsterke denne effekten ytterligere er en enkel sak om legge til en stilig CSS-bakgrunnsgradient til ditt element.

CSS Box Shadows & Text Shadows for kreativ webdesign

CSS-boks- og tekstskygger er enkle å bruke når du vet hvordan du jobber med dem. Du har nå verktøyene du trenger for å begynne å jobbe med dine egne design, men du bør fortsette å undersøke CSS for å forbedre ferdighetene dine.