CSS3 – Drop Shadows – single side
Bit more playing around with CSS3.
I was trying to get an effect with a single shadow down one side of a box, using the BOX-SHADOW in CSS. The “standard” deployment gave some results I was not too happy with. This was because the Shadow were spilling out over edges that I didn’t want it to be displayed on. See the image below.
As you can see the shadow is spilling over the top an bottom edge
I wanted the Left Side edge to ONLY have shadow on it….so after about 10 mins of clicking…..
After a bit of tinkering this is the result!
The CSS code is a follows :
box-shadow: 0px -5px 0px #fff, 0px 5px 0px #fff, 5px 0px 0px #fff, -2px 0px 5px #333;
-o-box-shadow: 0px -5px 0px #fff, 0px 5px 0px #fff, 5px 0px 0px #fff, -2px 0px 5px #333;
-icab-box-shadow: 0px -5px 0px #fff, 0px 5px 0px #fff, 5px 0px 0px #fff, -2px 0px 5px #333;
-khtml-box-shadow: 0px -5px 0px #fff, 0px 5px 0px #fff, 5px 0px 0px #fff, -2px 0px 5px #333;
-moz-box-shadow: 0px -5px 0px #fff, 0px 5px 0px #fff, 5px 0px 0px #fff, -2px 0px 5px #333;
-webkit-box-shadow: 0px -5px 0px #fff, 0px 5px 0px #fff, 5px 0px 0px #fff, -2px 0px 5px #333;
The way that this code is working is the first three shadows are full opacity in White (#fff) – which matches the BG of the box, and the last shadow applies the #333 shadow to the left hand edge. Yes it does increase the edge by 5px, but thats how I wanted the effect to look…