Sunday, January 10, 2010

CSS3

The CSS Working Group of WC3 has introduced several new functions and features to Cascading Style Sheets that you can use in web design. You are looking at one below, rounded corners which is implemented using the border-radius property. This feature allows you to create rounded corners on box items. The code for the effect shown below is: -moz-border-radius: 5px;-webkit-border-radius: 5px; padding: 5px;. The box is coded with the following properties: style="background-color:#e8e8e8;border-style:solid;border-width: 1px;

This is a box with rounded corners

Another new feature introduced in CSS is box-shadow. The code for box-shadow is
-webkit-box-shadow:5px -5px 10px #000;
-moz-box-shadow:5px -5px 10px #000000;

This is a box with rounded corners + box shadow
Here the shadow is above the box. If you want to position the shadow below the box, then you place the box-shadow code after the border-radius code in your CSS script. Both Mozilla/Firefox and Safari3 have implemented border-radius and box-shadow.

Pretty nice...

No comments:

Post a Comment

Get your own Widget