CSS3 for rounded-corner box, opacity and drop-shadow effect

For too long, it has not been possible to style an html page elements with attributes like rounded-corner, opacity and drop-shadow effects using CSS2 only without some kinds of browser specific hacks. CSS 3 changes all that and I am very excited when I found out I can achieve all that now with the following :

<style type=”text/css”>
#myBox {
 width:480px;
 background: rgba(255,255,255,0.5);
 border-color:#000;
 border-style:double;
 border-width:thick;
 border-radius:15px;  
 box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
</style>

As seen in the screenshot above, IE9 (preview edition) rendered the above correctly 🙂 Same cannot be said for other browsers yet without some browser specific attributes which I am totally against. If no one use any browser specific attributes, may be it would encourage all browsers to use standard CSS attributes.

Advertisements

~ by brianchau on August 6, 2010.

One Response to “CSS3 for rounded-corner box, opacity and drop-shadow effect”

  1. Thanks for your useful information

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: