Last week I posted a CSS3 dropdown menu and someone complained that I didn't explain the CSS code in detail. Well, here is a post on the basics of the new properties: text-shadow, box-shadow, and border-radius. These CSS3 properties are commonly used to enhance layout and good to know.

RGBA

The first three values are RGB color values and the last value is the level of the transparency (0 = transparent and 1 = opaque).

RGBA

RBGA can be applied to any properties associated with color such as font color, border color, background color, shadow color, etc.

RGBA 2

Text Shadow

Text shadow is structured in the following order: x-offset, y-offset, blur, and color;

screenshot

Set a negative value for x-offset to shift the shadow to the left. Set a negative value for y-offset to shift the shadow to the top. Don't forget you can use RGBA values for the shadow color.

text shadow 2

You can also specify a list of text-shadow (separated by a comma). The following example uses two text-shadow declarations to make a letter press effect (1px top and 1px bottom).

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

text shadow 3

Border Radius

The shorthand for border radius is similar to the padding and margin property (eg. border-radius: 20px). In order for the browsers to render the border radius, add "-webkit-" in font of the property name for webkit browsers and "-moz-" for Firefox.

border radius

You can specify each corner with a different value. Note Firefox and Webkit has different property names for the corners.

border radius

Box Shadow

The structure for box shadow is same as the text-shadow property: x-offset, y-offset, blur, and color.

box shadow

Again, you can apply more than one box shadow. The following example is a list of three box shadow declarations.

-moz-box-shadow:
-2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);

box shadow 2