• This property give designers and css coders a tool to give multiple text effects. Earlier which could only be done by giving effects to an image. There are various advantages of this property.
  1. As Text in an image is not searchable by search engines.
  2. CSS file size is very small in comparison to an image.
  3. Easy to update.
• Final result

www.phpmind.com

• Very simple and easy to use code which gives 3D look to your text.

    text-shadow: 0 1px 0 #3cc4fc,
               0 2px 0  #4fcbfe,
               0 2px 0 #5dd0ff,
               0 3px 0 #6bd3fe,
               0 4px 0 #78d5fc,
               0 4px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

• Browser support: The text-shadow rule is supported by many modern browsers including IE10.

• We have a very simple html code here. There is one div and an image of 400 x 300 under that div.

• We will do some basic styling by mentioning its width, background colour and place it in a center by using margin property. I am going to opt for #efefef as a background colour.

  body {	
  	width:400px;
  	background-color:#efefef;
  	margin:100px auto;
       }

  

• Our next step is to give styling to the class “container” which is the main div of the code. We will apply -webkit-box-shadow property for webkit supporting browsers, -moz-box-shadow for mozilla abd box shadow. I am using 2px for horizontal shadow(h-shadow), 3px for vertical shadow(v-shadow), 5px for blur distance and rgba colour value. Some more basic properties like margin and padding and background colour to white.Now as we can see that image is slightly bigger.  To fix it up we will use max-width property.
  
  

  .container {
  	width:400px;
  	-webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.5);
  	-moz-box-shadow: 3px 3px 5px rgba(0,0,0,.5);
  	box-shadow:3px 3px 5px rgba(0,0,0,.5);
  	padding: 20px;
  	margin:0 auto;
  	background: white;}
  .container img {	
  	max-width:100%;
  	max-height:100%;
  	border:1px solid #666;}

  

• We can give variations by using inset property to give depth at the top and left side of the image.

   

  
  
  

  .container {
  	-webkit-box-shadow:inset 2px 3px 5px rgba(0,0,0,.5);
  	-moz-box-shadow:inset 2px 3px 5px rgba(0,0,0,.5);
  	box-shadow:inset 2px 3px 5px rgba(0,0,0,.5);
  	padding: 20px;
  	margin:0 auto;
  	background: white;
  }

• Browser support: The box-shadow property is supported by many modern browsers including IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1.