Box-Shadow [Detailed]


In css 3 we used Box-shadow property to give shadow to an element.like this example we add some possible browser support css
how to work with Box-Shadow,Box-Shadow css3 property ,css3 trick ,html css3 tips,box-shadow,




.shadow-box{
    -moz-box-shadow: 3px 2px 13px #333;  /* Firefox */
    -webkit-box-shadow: 3px 2px 13px #333;  /* Safari  */
    box-shadow: 3px 2px 13px #333;  /* Firefox 4+ ,IE 9, Opera 10.5, Chrome */ 
    }  



explanation here

   box-shadow: [horizontal shadow] [vertical shadow] [shadow blur] [optional shadow spread] [color];   

  1. [Horizontal shadow] (required) Positive value means shadow will place on the right side of the element and if the shadow value is negative, then shadow will place on the left of the element like this below:                                                                                                                                                      
    
        box-shadow: 12px 0px 12px black;[color];/*Positive*/
    
    
        box-shadow: -12px 0px 12px black;[color];/*Negative*/
    
  2. [Vertical shadow] (required) negative value means shadow will place on the top side of the element and if the shadow value is positive, then shadow will be on the bottom of the element like this below:                                                                                                                                                      
    
        box-shadow: 0px -12px 12px black;[color];/*Negative*/
    
    
        box-shadow: 0px 12px 12px black;[color];/*Positive*/
    
  3. [shadow blur] (required) if value is set 0 its means shadow blur  will be sharp and if you set number t then shadow blur will be blur the element like this below:                                                                                                                                                      
    
        box-shadow: 0px 0px 0px black;[color];/*0*/
    
    
        box-shadow: 0px 0px 12px black;[color];/*Number*/
    
  4. [Color] (required) you can use color name or hex ,decimal color value to give color to the box-shadow like this below:                                                                                                                                                      
    
        box-shadow: 2px 2px 12px red;[color];/*Red*/
    
    
        box-shadow: 2px 2px 12px green;[color];/*Green*/
    

Inset Shadow  

You can also add box-shadow inside the element with just adding inset value like this

   box-shadow: inset 2px 2px 12px #ccc;
   box-shadow: inset 2px 2px 12px red;
   box-shadow: inset 2px 2px 12px green;
Example

Shadow Spread

Now using box-shadow 4th value like above we call it Shadow Spread ,basically it just give more width to box-shadow 

   box-shadow: 0px 0px 12px 12px black;/*First*/
   box-shadow: 0px 0px 12px 24px black;/*Second*/
   box-shadow: 0px 0px 12px 36px black;/*Third*/






Supported Browser

Browser support here we check it on some popular browser and its working fine for us
Firefox
Chrome
Opera
Safari
4+
3+
5+
5.5+


Comments