CSS3 Esthetics — Nov 13, 2012, 10:07 am
Here is a list of often used effects, which are accepted in all modern browsers. They come with some examples.

Rounded Borders (pixel-radius/percentage):
border-radius: 10px; // minimal use
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px; // horizontal/vertical radii for each corner
border-top-right-radius: 10px; // single corner
border-top-right-radius: 10px 5px; // single corner \w different x/y

Box-Shadows ([inset], x-, y-offset, [blur-radius], [spread-radius], [color]):
box-shadow: 10px 10px; // minimal use
box-shadow: 10px 10px 10px #000;
box-shadow: inset 5px 5px 5px 5px #000; // inset creates an inner shadow
box-shadow: inset 10px 10px #ccc, -10px -10px #000; // combination of both
box-shadow: 0 8px 6px -6px #000; // example for a single side shadow

Text-Shadows (x-, y-offset, [blur-radius], [color]):
text-shadow: 1px 1px 1px #000;
text-shadow: 1px 1px #ccc, 2px 2px #ccc, 3px 3px #ccc; // 3D effect
text-shadow: 0 -1px 1px #000, 0 1px 1px #fff; // inset example
You have almost endless possibilities with the use of shadow-combinations.

Opacity/Alpha (0-1):
opacity: .5;
Enter your comment:


  Use [code=LANGUAGE]...[/code] for highlighting (i.e. html, php, css, js)