How to create shadow using pure css property

Hello Friends,

Now html5 and css3 are more important in web design. There are some browser where it does not fully support html5 and css3 like internet explorer. However microsoft trying to support fully html5 and css3 tags like firefox and chrome.   At present i am not comparing any browser, because our aim to  create shadow in div box using pure css property. So now lets see our main goal.

Following is a simple css scripts.

div
{
box-shadow: 10px 10px 5px #888888;
}

This will add shadow in each div box.   but suppose you want to shadow in any specific div then you can do as under

<style>#mydiv { box-shadow: 10px 10px 5px #888888; }</style>

<div id=”mydiv”> this is content of div </div>
supports

Primary syntax :

box-shadow: h-shadow v-shadow blur spread color inset;

The box-shadow property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional inset keyword.  The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.

With many other ‘experimental’ CSS3 properties, you’ll need to use the following prefixes to support Mozilla and Webkit:

#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}

Understanding shadow property with dia gram :

shadow css property

Live example :

#testdiv{

    box-shadow: 0 0 5px 5px #888888;
    float: left;
    height: 65px;
    padding:7px;

text-align: center;

    width: 160px;
    display :block;

background-color: #EEEEEE;
}

 

 

this is test this is test this is test