Previously, I 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;
and a lot more…
Other related posts
Well written in a detailed way.
Franklin Manuel recently posted..Free Download Bloggermint Blogger Template
Thank you, Franklin.
Nice post bro. And i use roounded and box shadow for my new template, Sisi Gelap Blogger Template
DheTemplate recently posted..Camellia
Dhetemplate, thank you. Your template is very nice! By the way, I saw you were using images for the link separators(indented lines) in the left sidebar(NEW POSTS). But, it can be done with the use of CSS borders alone. That will minimize the usage of images. =)
Thanks for taking the time to write that. I found it very interesting. If you get a chance you should visit my blog as well. I hope you have a great day!