kaxigt.com

Jag skriver om webben för webben

Hem » CSS-guider » CSS 3 – del 5: Box shadow

CSS 3 – del 5: Box shadow

Postad: 18 november 2009 | CSS-guider | No Comments
Lästid: < 1 minut

I CSS 3 – del 2 visade jag hur man kan lägga till skuggeffekter på sin text men det går också alldeles utmärkt att skugga sina boxar med CSS 3 – om man vill förstås.

Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall och funktionsfil innan.

Egenskaperna för box-shadow anges i attributet längd och färg, precis som för text-skuggan; horisontell(x) – vertikal(y) – blur – färg.

När det gäller den horisontella placeringen ger alla positiva värden en skugga till höger om boxen medan negativa värden placerar skuggan till vänster om boxen.

Om den vertikala placeringen anges med ett negativa värde så positioneras skuggan ovanför (i toppen) av boxen, medan ett positivt värde däremot positionerar skuggan under boxen.

Vill du endast ha en blurrig skugga runt hela boxen anger du värdet 0 både i x som i y koordinaten men ökar värdet i blur till 10px eller mer. Vi ska kika på några exempel.

Som du upptäcker lägger vi till egenskapen -moz så att Mozilla Firefox också renderar koderna.

Här är en box med skuggan till höger
-moz-box-shadow:10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;

Kanske att du vill ha en rundad skugga? Då lägger vi till egenskapen box-radius och sänker värdet på blur.

Här är en box med rundad skugga uppe till vänster
-moz-box-shadow: -10px -10px 0 #000;
box-shadow: -10px -10px 0px #000;
-moz-border-radius: 5px;
border-radius: 5px; padding:
5px 5px 5px 15px;

Jag vill ha skugga runt hela boxen!

Här är en box med blurrig skugga där värdet på x och y-koordinaten är satt till 0.
-moz-box-shadow: 0 0 10px #333;
box-shadow: 0 0 10px #333;