Tilføjelse af Skygger for Dybde

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 skabe dybde, fremhæve specifikke elementer og tilføje visuel interesse til 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 udtoning for skyggen og er en valgfri værdi, hvor en højere værdi giver en mere udtonet 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.

Ud over box-shadow giver text-shadow og drop-shadow egenskaber os 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.