CSS Box Shadow

type='html'>

I'll give you a brief tutorial about css box shadow. As we know, the css is very important in a website/blog, without css web/blog like post with no content, bland. Css box shadow allows you to post templates, sidebar, header or you can use the blog articles. The shadow will appear with a little css code, you can see in the examples below.

 

Support Firefox, Safari, Chrome, Opera dan IE9

Css code for the box above is:

#example {

-moz-box-shadow: 10px 10px 5px #222;

-webkit-box-shadow: 10px 10px 5px #222;

box-shadow: 10px 10px 5px #222;

}

 

4 parts contained in the shadow box are:

• Horizontal offset: If the value is positive, the shadow will be right next to the box, and if negative then the shadow will be on the left box.
• Vertical offset: If the value is positive, the shadow will be under the box, and if negative then the shadow will be above the box.
• Blur radius: If zero it will be like a normal shadow, and if its value is greater then the shadow will appear to be a blur.
• The color of the shadow.

 

Here are six examples of the css shadow box that can mate to learn and use...

 

A	B	C
D	E	F

 

Css code for the 6 examples above is :

 

#example_A {
-moz-box-shadow: -5px -5px #222;
-webkit-box-shadow: -5px -5px #222;
box-shadow: -5px -5px #222;
}

 

#example_B {
-moz-box-shadow: -5px -5px 5px #222;
-webkit-box-shadow: -5px -5px 5px #222;
box-shadow: -5px -5px 5px #222;
}

 

#example_C {
-moz-box-shadow: -5px -5px 0 5px #222;
-webkit-box-shadow: -5px -5px 0 5px #222;
box-shadow: -5px -5px 0 5px #222;
}

 

#example_D {
-moz-box-shadow: -5px -5px 5px 5px #222;
-webkit-box-shadow: -5px -5px 5px 5px #222;
box-shadow: -5px -5px 5px 5px #222;
}

 

#example_E {
-moz-box-shadow: 0 0 5px #222;
-webkit-box-shadow: 0 0 5px #222;
box-shadow: 0 0 5px #222;
}

 

#example_F {
-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;
}

 

 

and if you want to change the shadow to be in the box (inner), like the example below :

 

F

 

 

#example_F {
-moz-box-shadow: inset 0 0 5px 5px #222;
-webkit-box-shadow: inset 0 0 5px 5px #222;
box-shadow: inset 0 0 5px 5px #222;
}

 

CSS box shadow works perfectly in mozilla firefox browser, another browser to only a few are able to function perfectly. Hopefully useful ..