Thursday, October 3, 2013

One sided Box-Shadow in CSS

The biggest problem that I used to encounter with respect to shadows while coding in CSS after designing in photoshop is that I add shadows towards one side in PS and I found it hard to replicate the same in CSS. There's a very simple solution to that.

There's a fourth property for box-shadow, which is the shadow spread property. I didn't know that something like this existed for quite a long time. An example for its usage is as below:

    -webkit-box-shadow: 10px 0px 5px -2px #888 ;

Set the fourth property negative, as required till you achieve the required one sided effect.

Note: The above example sets a 10px box shadow towards the right and sets the vertical box shadow to 0.

No comments:

Post a Comment