5 CSS3 Design Enhancements That You Can Use Today

Cool stuff!
What about IE 6 and IE 7?

Nice enhancements. I guess I shouldn’t use them all together, though!

Nice article for nice enhancements….
I use almost everything listed here and I don’t care about IE users… :p
These are going to be the norm so we better start use it now and see how IE will deal with these….

very interesting and useful info techniques

This is a great list, and a must read for web designers to stay on top of their game! Thanks for the tips!

One thing I found interesting though, is that while viewing the live working example provided above in Safari 4, I noticed some rendering issues with the rounded corners. When viewed in Firefox 3.5, these rendering issues dont appear. Any thoughts?

Also, stretching the browser window and watching the example stretch out as well was really cool. Looking forward to see how web developers can creatively use these new features!

Nice experiment, but rounded corner not rendering properly in safari 4

Still…. Kill IE6

I wonder how Design World would be if there were NO IE!

very cool. and is there already a site with css3?

who is IE6?? I forget! but in any case is really incredible what we can make now with css..

At first I wanted to reply something like: “Useless, no IE compatibility at all!” but then I figured we can simply use these CSS-techniques to enhance our web apps, as long as it still looks pretty in IE7+.

But still, rather than multiple backgrounds I’d prefer to use PNG images and multiple DIV-tags overlapping. That way you can get it to work in IE7+ and also Firefox, Safari and Chrome.

So that’s one bit of criticism: You’re suggesting techniques that simply will not work in the browser that is used by the vast majority of internet users. There are alternatives. And you are not suggesting those. We’re professionals here (I hope) that need to appeal to their visitors. That often means that 80% of your visitors are IE-users, and you aren’t going to change that by showing squared corners instead of rounded corners.

nice! I like it

Surely IE8 can support it?

Multiple Backgrounds
Supporting Browsers : Firefox 3.6 !

I wish IE could have supported CSS3. A nice article in fact.

Stranglely, none supported by IE. I’m so surprised.

looking good, thanks.

Hi, nice writeup! Opera support text-shadow as well though, and also background-size.

[disclosure: I work as a web developer for Opera Software]

Note that eg. round corners can be used in IE trough using the ultimate outcome for webdesigners: Jquery.
One thing you might not know about jquery is the built in function that replaces the standard CSS3 name and value to a transformed browser friendly version.
eg:
border-top-right-radius: 5px; (standard CSS3)
will also add:
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;

Just like the way it does when using opacity.

These are really cool things you can do with CSS3 today. I use to be the biggest Microsoft fan boy but these days i can clearly see that IE is seriously hampering our progressive enhancements to the web. Why bother do these cool nifty things today when you know that all that stuff will only be visible to a fraction of internet users? Honestly, i wish IE will just die or atleast they (Microsoft) should ditch their Trident rending engine in favour of a more mature framework such as Gecko or Webkit.

I was looking for a way to add shadow for a text by CSS for a long time. Thank You!

The title is a bit misleading.

“5 CSS3 Design Enhancements That You Can Use Today” implies that these are the CSS3 effects that are supported across all major browsers in one way or another (not the case as all of these degrade poorly or break design in IE) or that they differ in some way from the other CSS3 enhancements that are available to use in certain browsers (in which case the boundary line is not clear).

It’s true that these are “FIVE css3 enhancements that you CAN use today” (emphasis mine), but it might have been better to discuss all CSS3 enhancements and what browsers support them or to better identify what makes these 5 enhancements stand out (cross-browser support, graceful degradation, etc).

RGBA and rotation are the two that are difficult to see as degrading gracefully.

Text-shadow (incl. multiple text-shadows) has been supported since Opera 9.5
Support for transparent colors is in Opera since 10 alpha.

Some great stuff to start using, although I’m looking forward to trying to explain to clients again why their site doesn’t look the same in IE6!

Opera can do most if not all of these… Why isn’t it listed as a Supporting Browser?

Not sure about rotate – if it’s not in the spec it’s probably best left alone for now. Also text that doesn’t flow horizontally is bad for readability/accessibility.

@ZenZen IE 6-8 users still have the majority of the market share, and it has taken Microsoft almost ten years to reach a reasonable level of support for CSS2.1, will probably take the same for CSS3

Very interesting. What about FireFox 3.5.2?

Informative stuff, but if it doesn’t work in IE then I can’t use it today…

Nice tips, I’m glad we are getting around dumb ie issues.

I really have to put myself on the CSS3 because I am still working all in 2, cause my clients want to be ok in any browser. but next time noc are about IE “i must see wath the client thinks but….”
This kind of things are really useful, thanks for the tricks.
I love the idea of rotate…. let’s see what we can make with it.

Good article! Looks like FF3.5 doesn’t display multiple background images…

These are huge time savers. With all this fanciness being handled by CSS3 Photoshop will only be needed for photo manipulation and graphic embellishments. Rotate!

NICE CSS =)

Very cool! Unfortunately though, I won’t be using most of these features until 2036, when IE6 finally dies..

@ZenZen While not developing for IE may work for you, most clients I’ve had still use IE. I do think if people start using these new techniques in sites it may help push IE to support the new techniques, yet I won’t be able to use them until they work for my clients.

I do not see me using any of these soon…

IE6 Sucksss!!

Nice post, I’m not sure if these may work with all browsers but for ones they do definitely beneficial.

What a great selection. I especially like the opacity feature and can’t wait to give it a try. Thanks.

I would disagree that these 5 enhancements are simply ones which, if disabled, would only diminish visual appeal yet retain usability. Visual appeal is not just some secondary appendix which is tossed in at the last moment–it is just as important as usability since you can make things easier to use through visual design.

Looking at this from the perspective that there should be a purpose for every design element (i.e. “what are you communicating by using that treatment”), things like drop shadows and rotation are major design elements. Why you choose to treat elements the way you do should be paramount in the designer’s mind.

Of course, the last example of this article (Special Bonus section) is just to demonstrate these 5 enhancements simultaneously, however I would find it hard to argue that the bottom example simply lacks visual appeal and that’s okay. These are two drastically different designs.

In a real-world case where you may only use one enhancement in one browser but not in another, there might (maybe) be an argument to support using it, but again I ask why? If your design can stand without the enhancement, don’t use it–if it can’t stand without it, find another way to support it in all browsers.

As Designers, we can complain about IE all we’d like as it inconveniences us to develop, however it has the largest market share (http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0) and we need to innovate around the design problems. On a more localized scale, we need to assess what our client’s browser stats are and see who is in the majority and approach our designs accordingly. If Firefox is 90% of your client’s base, then you can leverage these techniques with ease.

… I think I’ll wait. If it’s not in IE then it’s barely practical for the real world. I’ll think about this in a year or so.

to all who have commented negatively towards this post because of the lack of IE support…

how can we ever move on if no one will ever do anything that isn’t supported by IE? are all of you still listening to cassette tapes or 8-tracks (or cd’s)? if we keep restricting ourselves to what works in IE6, then the web will never advance. and the funniest part, is that this post was written to inform people of things that they can do that might enhance a design for users who aren’t using IE. did you microsoft fans even read this article or just the headline? “it doesn’t work in IE” isn’t a valid argument if the author clearly stated that it wouldn’t. what are you all gonna do when CSS3 becomes fully available for use in most browsers? you still gonna be developing sites for IE6 i bet. some people (myself included) just like to complain.

anyways. good article. it’s nice to be able to play around with some of this stuff and get used to it in advance.

@ still rockin vinyl

Trust me, people who HAVE to develop for IE are NOT Microsoft fans. Most of us working in the real world have enough trouble getting things to work for IE that trying some CSS3 for 12% of the browser world just doesn’t seem like a good use of time.

Those of us in larger corporations will have bosses/managers that will never view our work outside of IE6. It’s sad, but it’s reality in many places. My previous comment was never meant to be negative and I certainly FOR moving into the future ASAP and living in a world without IE6.

I applaud the article and I look forward to using these CSS3 features in 3-5 years.

.. on a side note, I would use these features if my user demographics called for it. I’ll bet that certain web-industry websites have IE users in the minority.

Awesome features. Thanks for this great explanation.

Nice article but Dave is right. Most of this will be useless in the real world for a good few years yet, even if Microsoft release IE9 with all the bells and whistles tomorrow.

Another thing to consider is that unlike other vendors, M$ are very unlikely to implement these features based upon a working draft, and for a good reason. The sooner that CSS3 specification is finalised, the sooner we can expect them to do so.

Minor typo in 4 by the way: “You can add multiple shadows just by including multiple values separated by spaces” – spaces should be commas, right?

Thanks for the tips!

good stuff
but you cant rely on it for layout and design yet
only for enhancement – till ie caches on
im useing 2 sets of css files (if mozzilla firefox end if etc…)

Great stuff, I´m allready using most of this stuff and enjoying myself (nerdy)

It´s also so interresting to see that ther never is any support in IE in any version.

Great post, have read a load of posts recently on CSS3 but very little have actually gone out and shown what it looks like, keep it up.

Supporting IE is a pain in rear end and I agree with most of the comments regarding it holding back the widespread adoption of the new freedom CSS3 and HTML5 will offer up, however IE does account for a substantial amount of the market, as well as older versions, not only because users do not upgrade their browser but also because they do not have the ability to, i.e. corporations or big companies, so much as it causes us a headache, I believe we will just have to suffer the late nights until firefox, safari or whoever overtake microsoft.

At the end of the day 4.5% of my web visitors last month were from ie 5.5, should I discriminate them or are these the guys that I will get the most trade out of. . .

@ Blue Tube Design: interesting observation – they may be a small portion but that’s not to say they’re unimportant. That’s the beauty of analytics ;o)

Great article on css3 modules, if you know of any worthy sites using css3 please feel free submit them on our new CSS3 Gallery

I agree with most of the comments regarding it holding back the widespread adoption of the new freedom CSS3 and HTML5 will offer up, however IE does account for a substantial amount of the market….

Just use transparent sometimes. Rounded corners are useful, but I still use pictures to do that.

Muito bom – primeira visita e retornarei em breve

For all those looking for IE compatibility, there is a filter that can make IE do rotation. For example, here are the css rules to rotate an object five degrees counter clockwise in all the browsers:


.tilted-box {
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11='0.9999988', M12='.08715574', M21='-.08715574', M22='0.9999988');
}


Here’s the docs on how it works: http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx

Personally, I tend to add little CSS 3 embellishments that those with good browsers can enjoy and not worry about IE, unless it’s absolutely essential to the design.

thanks for the article, most interesting. I believe progressive enhancement is the future with regards IE6. If users can see the site in IE6 but can’t access all the website eye candy this is fine for me.

Not all browsers are equal.

I use the WebKit and Moz Border radius and they work awesome on my site, also…there is a great work around for internet explorer though that you can find by this guy Drew Diller called DD_Roundies that works great for IE…then you have nice rounded corners even in IE!

The possibilities of CSS3 are really exciting, but I’m also kind of scared about how ugly things can get…

Text-shadows leave a bad taste in my mouth. Paired with @font-face and you might have a really ugly disaster.

Hey CSS3 is great. It has very nice features

this is very good tutorial i learn very much from here

this is very good tutorial i learn very much from here

Good Job!!

Thank you for posting this article.

The features of CSS3 that I am most amazed with is both border-radius and multiple-backgrounds!

No flash , No IE , Just CSS3 and js (our’s dream)

These are some really helpful tips. Thanks again.

Nice blogpost, good looking website, added it to my favs.

Great!!! öööööö
Very Good

Nice to know about your experience there.

thnks