Thursday, January 19, 2012

The Basics of CSS3


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
Source from:http:webdesignerwall.com

0 comments:

Post a Comment