CSS Shadow

Box Shadow

• Sample example 
• .my-shadow{

                             box-shadow:              1px 1px 5px 5px #ddd;

                            -webkit-box-shadow:  1px 1px 5px 5px #ddd;                       
                            -mox-box-shadow      1px 1px  5px 5px #ddd;                  
                           
                    }

• .class_name{box-shadow: [horizontal_offset] [vertical_offset] [blur_radius] [spread_radius] [color]; }
• horizontal_offset* positive value shows shadow right of the box, negative value shows shadow left of the box
• vertical_offset* positive value shows shadow below of the box, negative value shows shadow top of the box
•  blur_radius* Default value 0. shadow goes blur when value would be positive.
• spread_redius (optional) Default value 0. Would you like to increase the shadow size. This value play an important role when want shadow around the whole area. 
• color: Shadow color.
• Compatibility
•  box-shadow --Support all current version. Chrome 6+, iOS 5, Firefox 4+, Opera 10.5
• -moz-box-shadow--Mainly Firefox 3.5 - 3.6
• -webkit-box-shadow--Mainly Safari 3-4, iOS 4.0.2-4.2, Android 2.3+ 
• Example 1 (Shadow around the whole area)
• .shadow_e1 {
  width: 100px;height:100px;
  -webkit-box-shadow: 0px 0px 22px 12px #bbb;
  -moz-box-shadow:    0px 0px 22px 12px #bbb;
  box-shadow:         0px 0px 22px 12px #bbb;
  }
• Whole Area