box-shadow - skygge på block html elementer.

CSS Box Shadow nem at bruge - nem at misbruge!

Heldigvis er vi nu forbi den perioden, hvor der skal skygge på alle block elementer. Et nyt “CSS værktøj” - CSS skyggen, så dagens lys for nogle år siden, webbrowsere var hurtig til at implementerer, og pludselig var der skygger på alt … alt!
I skrivende stund er det “Flat Design”, der er det nye sort, og box-shadow er sat i skammekrogen.
Man skal dog ikke helt afskrive Box Shadow, som i dag benyttes på mange nye hjemmesider og HTML5 app, nu bare i en mere smagfuld dosering! Før webdesignere kunne benytte Box Shadow som CSS, blev der brugt transparente png grafik filer. Resultatet var tunge hjemmesider, der var besværlige at arbejde videre på.

box-shadow

box-shadow: 2px 4px 6px 8px farvekode

1) Vandret forskydning: positiv værdi skubber skyggen mod højre, negativ værdi mod venstre

2) Lodret forskydning: positiv værdi skubber skyggen nedad, negativ opad

3) Diffus eller Sløring: større værdi giver mere sløring. En værdi på 0 giver en hel skarp kant. Negativ værdier giver ikke mening!

4) Spredning af skygge: afstand til skygge. Negativ værdier giver ikke mening!

Box Shadow

Specielle skyggeeffekt ved hjælp af pseudo elementerne :before & :after

Som eksempelvis Nicolas Gallagher har vist, kan man skabe avancerede skyggeeffekter ved hjælp af CSS pseudo elementer.
Se her: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

Kilder:
http://box-shadow.info/
http://www.w3.org/TR/css3-background/#the-box-shadow