Previously, we wrote a tutorial on creating rounded corners with the aid of CSS3. Today’s tutorial is on another great effect that can be achieved using a CSS3 property, box-shadow. This box-shadow property enables you to apply one or more drop-shadow effect to a box. And again, this effect is only supported in Firefox, Safari, Chrome, and Opera for now.
Box-shadow property contains six attributes:
box-shadow: 1px 1px 1px 1px rgba(0,0,0,1) inset;
property: x-offset, y-offset, blur distance, spread distance, color, inset attribute for inner shadows ;
| Attributes | Description |
| x-offset | Horizontal offset of the shadow. Positive values to make the shadow fall on right side of box. Negative values to make shadows fall on the left. |
| y-offset | Vertical offset of the shadow. Positive values to make the shadow fall below the box. Negative values to make shadows fall on top of box. |
| Blur distance | Negative values are not allowed. If the value is zero, the shadow’s edge will be sharp. The more positive the value, the more blur the shadow is. |
| Spread distance | Negative values cause shadow to shrink inwards. Positive value makes the shadow to expand in all the directions. |
| Inset | Adding this attribute to the syntax will create an inner shadow effect. |
| Color | Color of the shadow. HEX code, RGB or RGBA can be used as the value. |
Here are some examples grouped according to the attributes used. I’ve used RGBA for the color. So, I want to explain about RGBA too. RGBA works similar like the previous RGB used in CSS2. But, RGBA includes ‘alpha’ to allow specification of the opacity of a color.
rgba(R,G,B,A)
R : 0-255
G: 0-255
B: 0-255
A:0-1
If you are less familiar with RGB color, you can use online generators and then add an opacity value to create RGBA.
CSS3 “box-shadow” Examples
Without box-shadow usage
This normal box with sharp-edge corners was created using the following code.
<div style=”background-color:#F1F1F1; border:3px solid #DDDDDD;”></div>
This normal box with rounded corners was created using the following code.
<div style=”background-color:#F1F1F1; border:3px solid #DDDDDD;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;padding: 10px;”></div>
Shadow ( x-offset and y-offset attibutes used)
-webkit-box-shadow: 5px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 5px 5px rgba(0,0,0,0.4);
box-shadow: 5px 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 5px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 5px 5px rgba(0,0,0,0.4);
box-shadow: 5px 5px rgba(0,0,0,0.4);
-webkit-box-shadow: -5px -5px rgba(0,0,0,0.4);
-moz-box-shadow: -5px -5px rgba(0,0,0,0.4);
box-shadow: -5px -5px rgba(0,0,0,0.4);
Blur Attribute usage
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
Spread Attribute usage
-webkit-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);
box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);
-webkit-box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);
box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);
Inset Attribute usage for inner shadow
-webkit-box-shadow: 10px 10px inset rgba(0,0,0,0.4);
-moz-box-shadow: 10px 10px rgba(0,0,0,0.4) inset;
box-shadow: 10px 10px rgba(0,0,0,0.4) inset;
Inset with Blur
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
-moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
Inset with Blur and Spread
-webkit-box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
-moz-box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
From now on, we have planned to write about CSS3 tutorials and hope these tutorials are helpful.
Pingback: Tweets that mention CSS3 Tutorials: Box Shadow Effect | Bloggermint -- Topsy.com
another great tutorial..
.-= arkimz´s last blog ..20 Free Simple WordPress Themes =-.
Pingback: MintShare - Pure CSS & HTML Based Social Share Widget | Bloggermint
Pingback: 20 Fresh Free HTML5 And CSS3 Website Templates And Tutorials | Bloggermint
Pingback: Embedding Custom Web Fonts Using CSS3 @font-face Rule
Thank you very much, this is the best tutorial I have seen so far. This helped me understand everything so much better.
-Peace.
its not working in ie. what should i do??