While the the W3C seem to be taking forever to implement new web standards and seem happy sitting on their butts forever without moving forward. Here are a bunch of CSS 3.0 proposals that Web Designers would go nuts over if ever they are implemented. I give them time till 2999 to implement them, at the rate things are going in the W3C. I saw the original post here on anieto2k blog but since I don’t understand what language it is written in, I decided to translate it. By the way Opera 9.5 has full support for CSS 3.0
Multi Columns
Currently when you create a multi columned layout i.e 2 column or 3 column layout you need to specify individual and separate DIV HTML elements to achieve the desired effect. But in CSS 3.0 you can achieve this with a single CSS declaration like thisDIV {width: 400px;column-count: 4;
column-width: 100px;
column-gap: 10px;column-rule: none;
}
This is actually possible in FireFox but it is not Standard CSS 3.0 you’ll need to use FireFox Specify code in your CSS to achieve the effect. Example is given below.
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
Multi-Background
Currently it is not possible to put multiple background Images to the same HTML element but in CSS 3.0 you can easily do this.background: url('http://www.clazh.com/images/body-top.gif')
top left no-repeat,
url('http://www.clazh.com/images/banner_fresco.jpg')
top 11px no-repeat,
url('http://www.clazh.com/images/body-bottom.gif')
bottom left no-repeat,
url('http://www.clazh.com/images/body-middle.gif')
left repeat-y;
Zebra Tables
You can easily do zebra table without the need for JavaScript or putting CSS Classes on individual Table Rows to give alternate colours.tr:nth-child(2n+1) /* represents every odd row of a HTML table */;
tr:nth-child(odd) /* same */
tr:nth-child(2n) /* represents every even row of a HTML table */
tr:nth-child(even) /* same *//* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }
Rounded Corners
How about the ability to render the ever popular and so called Web 2.0 rounded Corners for a box(html Element) with just a single line of CSS.-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
Opacity
Currently almost all browsers support their own version and syntax for opacity. Here is the CSS 3.0 Standard code for opacity/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
Resize
Ability to resize a HTML Element automaticallydiv.resize {width: 100px;
height: 100px;
border: 1px solid;
resize: both;
overflow: auto;
}
Text Effects
Text effects like drop shadow and Text Overflow.color: #fff;background-color: #fff;
text-shadow: 2px 2px 2px #000;
text-overflow: ellipsis-word;
For more visit: www.cssgenerator.com
Enjoy :)
