Skugga på en sida, One-side shadow

I min tutorial om hur man gör skugga runt bloggen har jag fått väldigt mycket frågor, en av de frågor som har dykt upp är denna:

”Men hur gör man om man vill ha på en speciell sida bara, left, right, top eller bottom? Har letat runt som en galning men hittar ingenting. Tacksam för svar! :)”

Personligen hade jag gjort det i photoshop då jag tycker det gör en snyggare skugga, men självklart finns det en kod för det i stilmallen (css). Men nu ska jag göra en tutorial för hur man gör skugga på EN sida av bloggen/hemsidan.

Gör bara såhär:
Koden klistras in under wrapper, precis som vid vanlig skugga. Koden består av tre rader och ser olika ut beroende på vilken sida du vill ha skuggan på.

Här är de olika koderna för de olika sidorna:

För toppen:
-webkit-box-shadow: 0 8px 6px -6px white;
-moz-box-shadow: 0 -5px 6px -6px white;
box-shadow: 0 8px 6px 6px 5px white;

Höger:
-webkit-box-shadow: -0px 3px -0px -0px white;
-moz-box-shadow: 0px 8px 6px -0px white;
box-shadow: 7px 0px 6px -5px white;

Botten:
-webkit-box-shadow: 0 8px 6px -6px white;
-moz-box-shadow: 0 8px 6px -6px white;
box-shadow: 0 8px 6px -6px white;

Vänster:
-webkit-box-shadow: -10px 3px -0px -0px white;
-moz-box-shadow: 0px 8px 6px -0px white;
box-shadow: -7px 0px 6px -5px white;

Klistra in och spara! Självklart går det ändra färg, i exemplet har jag valt vit (white) men det går även bra som färgkoder (#FFFFFF).

Här är ett exempel, där jag har valt att skugga toppen på sidan: