CSS er fuld af muligheder for at forbedre udseendet af dine hjemmesider; tekst- og boksskygger er gode eksempler. De tilbyder lignende resultater som skyggerne, der findes i billedredigeringssoftware som Photoshop.

Men hvordan fungerer CSS-skygger? Lad os dykke lige ind.

Sådan bruges CSS Box Shadow

Du kan anvende en CSS-boksskygge med en enkelt linje CSS, der indeholder et interval på op til seks værdier. Rækkefølgen af ​​værdier er afgørende for, at din CSS-boksskygge fungerer, og den ser sådan ud:

box-shadow: offset-x offset-y slør spredning farve indsat;

Lad os tage et kig på hver af værdierne i rækkefølge.

CSS Box Shadow Position

Værdierne offset-x og offset-y styrer placeringen af ​​din boksskygge. Offset-x-værdien repræsenterer skyggens vandrette position, mens offset-y er den lodrette forskydning.

 box-shadow: 10px 10px;

Positive værdier resulterer i en skygge under og til højre for elementet.

Du kan også bruge negative værdier 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 opad:

instagram viewer

CSS Box Shadow Blur

Som du kan se, vil tilføjelse af h-offset og v-offset til din skygge skabe en solid skygge uden nogen fjer. Sløringsværdien slører din CSS-boksskygge og træder i kraft, hvis du angiver en tredje værdi:

box-shadow: 10px 10px 20px;

Jo højere tal du tilføjer til sløringsværdien, jo mere sløret bliver din CSS-boksskygge. Denne værdi kan ikke være negativ.

CSS Box Shadow Spread

Spredningsværdien giver dig mulighed for at ændre størrelsen på din skygge uden at ændre dens position.

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

En positiv spredningsværdi vil gøre din CSS-boksskygge større, mens en negativ værdi vil gøre den mindre.

CSS Box Shadow Color

CSS-boksskygger er som standard elementets tekstfarve, men du kan tilsidesætte det ved at tilføje en farve:

box-shadow: 10px 10px 20px 10px #0000ff;

Den farve, du bruger, skal være i et lovligt CSS-farveformat, såsom en hex-kode, RGB-kode eller foruddefineret farve. Du kan lære om hex-koder og andre lovlige CSS-farvemuligheder, før du går i gang med dine skygger.

CSS Box Shadow Inset

CSS-boksskygger falder som standard uden for deres tildelte element. Ved at tilføje et indskud til box-shadow-egenskaben kan du få vist skyggen på indersiden af ​​elementet.

box-shadow: 10px 10px 20px 10px #0000ff indsat;

Dette er en foruddefineret tekstværdi; blot tilføje eller fjerne det for at indstille værdien.

Sådan bruges CSS Text Shadow

CSS-tekstskygger er som boksskygger, selvom de har færre værdier at ændre. Syntaksen for en CSS-tekstskygge ser sådan ud:

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

Men hvordan fungerer disse værdier?

CSS-tekstskyggeposition

CSS-tekstskyggeforskydninger fungerer meget på samme måde som de samme boksskyggeværdier:

tekst-skygge: 10px 10px;

Positive værdier vil placere skyggen under og til højre for teksten.

Negative værdier gør det modsatte, idet de placerer skyggen over og til venstre for teksten.

 tekst-skygge: -10px -10px;

Du kan blande negative og positive værdier for at placere din CSS-tekstskygge perfekt.

CSS-tekstskyggesløringsradius

CSS-tekstskyggeslørradius giver dig mulighed for at sløre skyggen bag din tekst.

tekst-skygge: 10px 10px 10px;

Standardværdien for denne værdi er 0 (ingen sløring).

CSS tekstskyggefarve

Som standard matcher CSS-tekstskygger farven på teksten. Du kan ændre farven på din tekst ved at tilføje den til slutningen af ​​CSS-tekstskyggeegenskaben.

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

Ligesom CSS-boksskyggefarver skal du bruge en lovlig CSS-farve til dette.

Eksempler på CSS-boks og tekstskyggedesign

Du kan begynde at eksperimentere med din brug af CSS-boks og tekstskygger, når du forstår det grundlæggende. Ideerne nedenfor bør inspirere dig til at finde på dine egne kreative måder at bruge disse CSS-egenskaber på.

Dobbeltfarvede kanter med to CSS-boksskygger

Du kan tilføje mere end én boksskygge eller tekstskygge til et HTML-element. Så længe de har kommaer mellem dem, kan du tilføje nye skygger til en enkelt egenskab.

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

Denne tofarvede kant er et godt eksempel på dette. To CSS-boksskygger med modsatrettede positioner og ingen sløring/spredning giver en fremragende kreativ kant.

Dual CSS Text Shadows for dramatisk effekt

På samme måde som ideen ovenfor kan du tilføje og placere tekst i flere tekstskygger for at få interessante resultater.

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

Dette eksempel viser en tekstlinje med en skygge over og en skygge nedenfor, som begge har tekstbaserede farveværdier.

Flerfarvede baggrunde med indsatte CSS Box Shadows

CSS er kraftfuld nok til at skabe unikke og interessante aktiver uden nogen eksterne filer. Brug af en indsat CSS-boksskygge som baggrund er et godt eksempel på dette.

box-shadow: 20px 10px 10px 40px #000000 indsat, -50px -30px 8px 60px grå indsat, 30px 20px 6px 90px lysegrå indsat;

Denne æske har en hvid baggrund sammen med tre indsatte skygger i forskellige farver. Skyggerne overlapper hinanden for at skabe en unik baggrund.

At forstærke denne effekt yderligere er et simpelt spørgsmål om tilføjelse af en stilfuld CSS-baggrundsgradient til dit element.

CSS Box Shadows & Text Shadows til kreativt webdesign

CSS-boks og tekstskygger er nemme at bruge, når du først ved, hvordan man arbejder med dem. Du har nu de værktøjer, du skal bruge for at begynde at arbejde på dine egne designs, men du bør fortsætte med at undersøge CSS for at forbedre dine færdigheder.