Are you still using Photoshop to create a Shadow Effect for your DIV tags and setting the image in CSS ?
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.
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
Sample 2: With Blur Effect
Sample 3: With Heavy Blur Effect
Sample 4: With Inner Shadow Effect
Sample 5: 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.