New CSS 3.0 Features That Web Designers Would Love To Play With

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 this

DIV {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 automatically

div.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;

16 Responses

Multi-background would make my life complete. :P

kool…this is what was needed…

Multiple backgrounds and rounded corners would cheer me up, really. But will all this be well rendered by the browsers?

If you read about Jeremiah Grossman & RSnake’s presentation at BlackHat-US’07, you’ll realize how broken the web is! They performed some demos WITHOUT Javascript. :)
The prosopals look amazing from web developer’s perspective, but I won’t be surprised if reasearchers find a way to use them for exploit as well. I just hope this all makes the lives of security researchers easier too.

drools, i like the multi-background. been waiting for it more than a year i think. the opacity might come handy.
but i believe we have to wait a year or more after the release of final css3. I am refering to the browser support. IE7 have been released almost a year now, yet we have have to struggle with support for IE6 too

Nice findings, Thanx for sharing

these updates, if implemented, would really make my life easier

Pardon my ignorance :) but can I know which browsers currently support CSS 3.0?

all?

cz this looks damn cool

I can bet it won’t work in IE 6 without the need of any hacks

I can’t wait for CSS 3.0. Seriously. I just hope IE8 or 9 or whatever will support it, and support it well.

yehaaa!! kool tips. thanks for it.

In case any of you are wondering, none of the current browsers support CSS 3.0 fully. Actually, none of them support CSS 2.1 fully. They will all slowly add support for these features, but to be honest, I’m guessing it will be another five years before we can really start using these features.

Awesome Features .

I will be blessed if they implement the rounded corner soon. slick.

These new features will be definitely useful! I hope CSS 3.0 gets released soon!

I think it would be great if they included the ability to create gradients/fade effects/glow effects to the CSS 3.0 specification.

Well! guys done be so much excited..CSS 3.0 is done alot of things easier for Developer but..what about browser support??

It would be better if there were any standardization mantained by w3c.
Lastly, I myself being a Developer, is desperately waiting for it.

Trackbacks/Pingbacks