Lære Tilføjelse af Skygger for Dybde og Stil | Tilføjelse af Dekorative Effekter med CSS

Vi kan bruge box shadows til at skabe en visuel effekt, hvor et element ser ud til at svæve over baggrunden. Denne effekt kan tilføje dybde, fremhæve specifikke elementer og skabe visuel interesse på en webside. For at opnå dette kan vi anvende egenskaben box-shadow.

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;

offset-x angiver den horisontale placering af skyggen, hvor en positiv værdi flytter skyggen til højre for elementet og en negativ værdi flytter den til venstre;
offset-y angiver den vertikale placering af skyggen, hvor en positiv værdi flytter skyggen nedad og en negativ værdi flytter den opad;
blur-radius bestemmer graden af sløring for skyggen og er en valgfri værdi, hvor en højere værdi giver en mere sløret skygge;
spread-radius er også valgfri og øger eller mindsker størrelsen på skyggen afhængigt af dens positive eller negative værdi;
color angiver farven på skyggen ved brug af et hvilket som helst gyldigt farveformat og er også en valgfri værdi.

index.html

index.css

Bemærk

For at finde den bedst egnede skygge, besøg kilden shadow generator.

Ud over box-shadow giver egenskaberne text-shadow og drop-shadow mulighed for at tilføje skygger til henholdsvis tekst og andre elementer. De fungerer på samme måde som box-shadow-egenskaben. Disse egenskaber anvendes dog sjældnere sammenlignet med box-shadow.

Var alt klart?

Tak for dine kommentarer!

Sektion 5. Kapitel 5

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Stryg for at vise menuen

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;