Border Shadow Effect in CSS3.0

submit to reddit

Are you still using Photoshop to create a Shadow Effect for your DIV tags and setting the image in CSS ?

Or

Still using JavaScript to get Shadow effect for your  images ? Yes ??

Lets Stop using Photoshop  and Start Using CSS 3.0 !

One of the most coolest feature in CSS 3.0 is the Box shadow property. This gives you an awesome look for all the borders designs. Lets see the syntax.

Syntax :
{
box-shadow: <horizontal> <vertical> <blur> <color>
}

It looks simple but powerful. The first field in the property specifies the horizontal shadow, continued by the vertical shadow. The third field in the property specifies the blur ratio, followed by the color of the shadow.

Cross Browser Compatibility :

  • Firefox 3.5 implements the feature as -moz-box-shadow.
  • Safari Browser implementing the feature as -webkit-box-shadow.
  • Microsoft Internet Explorer have DropShadow filter.
  • Opera Browser users are unlucky to view this shadow property.

Let us see some of the examples of Box-Shadow property.

Sample 1: Without Blur Effect

Code :
{
box-shadow: 5px 5px #666;
-moz-box-shadow: 5px 5px #666; // For Firefox Browser
-webkit-box-shadow:5px 5px #666;
}

Preview :

This is a Sample Box Shadow Effect [Without Blur Effect]

Sample 2: With Blur Effect

Code :
{
box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow:5px 5px 5px #666;
}

Preview :

This is a Sample Box Shadow Effect [With Blur Effect]

Sample 3: With Heavy Blur Effect

Code :
{
box-shadow: 5px 5px 50px #BDBDBD;
-moz-box-shadow: 5px 5px 50px #BDBDBD;
-webkit-box-shadow:5px 5px 50px #BDBDBD;
}

Preview :

This is a Sample Box Shadow Effect [With Heavy Blur Effect]

Sample 4: With Inner Shadow Effect

Code :
{
box-shadow: 0px 0px 5px #000;
-moz-box-shadow:inset 0px 0px 5px #000;
-webkit-box-shadow:inset 0 0 5px #000;
}

Preview :

This is a Sample Box Shadow Effect [With Inner Shadow Effect]

Sample 5: With Rounded Border shadow Effect

Code :
{
box-shadow: -10px -10px 0px #000;
-moz-box-shadow:-10px -10px 0px #000;
-webkit-box-shadow:-10px -10px 0px #000;
}

Preview :

This is a Sample Box Shadow Effect [With Rounded Border shadow Effect]

You can see this feature working only in Safari 3+ and Firefox 3.1 Alpha. Other browser users wont see this feature.

So no more Jpeg/Gif/Png for Border Shadows from now. Start using CSS3.0.