Thursday, July 2, 2009

CSS 3 boomerang........

Hope everyone must have come across CSS 3 (cascading style sheets), a dream come true for UI's. Well Firefox Safari, Konqueror and Opera are done with their things and made us to taste the new face of CSS 3.

Some of the features I liked to list it down, to show how compatability the CSS 3 is....


Grading styles in border

border: 10px solid #000;

-moz-border-bottom-colors: #2dee28 #1fdd1a #18ca14 #0eba0a #0ca809 #099705 #098706 #077c04;
-moz-border-top-colors: #2dee28 #1fdd1a #18ca14 #0eba0a #0ca809 #099705 #098706 #077c04;

-moz-border-left-colors: #2dee28 #1fdd1a #18ca14 #0eba0a #0ca809 #099705 #098706 #077c04;
-moz-border-right-colors: #2dee28 #1fdd1a #18ca14 #0eba0a #0ca809 #099705 #098706 #077c04;
padding: 5px;
here you can change the color of the tone and see.... Its quite interesting...

Rounded corners

background-color: #38c0ff;
-moz-border-radius: 20px;
border: 5px solid #0475a9;
padding: 10px; color:#00283a;


Not the thing it should be rounded corners, just increse the radius and see....

Multi column layouts

-moz-column-width: 150px;

-moz-column-gap: 10px;



According to the resolution column automatically created...even it can be a fixed column "-moz-column-count: 3;"

For more features of CSS 3 http://www.css3.info/preview/