Css3 Shadow Tutorial And Reference

Published on: September 9, 2014   Last Updated on : December 7, 2014   Posted By : WebDesignReference

css3 supports two type of shadow property for styling an element.

  • Css3 Box Shadow : This property comes under CSS3 Border.
  • Css3 Text shadow : This property comes under CSS3 Text Effect.

Css3 : box-shadow Property

Example : use of Css3 : Box-shadow Property

#box_shadow {
width: 300px;
height: 100px;
background: green;
box-shadow: 9px 10px 10px 1px #000
}

Css3 : text-shadow Property

Text Shadow Example

Example : use of Css3 : Text-shadow Property

#text_shadow {
width: 300px;
height: 100px;
background: yellow;
color: blue;
text-align: center;
}

h4 {
text-shadow: 6px 5px 8px #000;
padding-top: 20px;
}
 

Leave a Reply