is a professionally managed web design and web development company in Hyderabad, India.
Friday, 4 April 2014
Rounded shadows with CSS3 and no images
Example 1. Simple rounded drop shadow with box-shadow property.
First create the HTML element which will cast the shadow.
<div class="box css3-shadow">
Box-shadow css property is used to create the rounded drop shadow effect. Credit goes to <a href="http://www.paulund.co.uk/creating-different-css3-box-shadows-effects" target="_blank">Paulund.co.uk</a> for inspiration.</div>
As you see, the div has 2 classes: box and css3-shadow. Box class will be generic class for all the shadow-casting containers in our case, and the second class will have the :after element which’ll create the actual shadow.