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:
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.
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