CSS3 Bling in the Real World

by Chris Mills

36 Reader Comments

Back to the Article
  1. Hello Chris,
    I am delighted to see the ONE round edge in IE as worked out in demo example via CSS3 PIE. Around an year back, I gave a shot to this library for round corner stuff. But was not able to see that effect. Nice fixing to IE! :- )

    Copy & paste the code below to embed this comment.
  2. Yup – CSS3 pie has come on nicely! It is a shame about the limited opacity support though, and I wish they’d add support for text-shadow as well.

    Copy & paste the code below to embed this comment.
  3. Chris,
    Thanks so much for the article. I have to deal with a lot of browser compatibility in my web design work. I was wondering if you could post link to a live example of the ie compatible “finished product.” I’m curious to see how it fairs in IE 6… the less images I have to use the better!

    Copy & paste the code below to embed this comment.
  4. I have been using all of these CSS3 techniques on my clients sites for some time. They work great and degrade very gracefully. I’ve never heard of a client even noticing the difference. I’ve never had to bother with pie. I just learned to live with gracefully differences between browsers. Glad to see there is an option though.

    I didn’t, however, realize that you could do multiple text and box shadows. That is going to be very handy. Thanks!

    Copy & paste the code below to embed this comment.
  5. Nicely written article, Chris! Thanks for the great coverage of PIE (I’m its creator).

    You’ll be happy to know that proper text-shadow support is currently in the works as well as opacity support in gradients. :)

    Copy & paste the code below to embed this comment.
  6. Great article… CSS3 just rocks hard!

    I have to say though, I’m am utterly sick and tired of spending more time doing my job for the sake of Internet Explorer.

    Copy & paste the code below to embed this comment.
  7. Thank you Chris. Great Article. CSS3 is awesome!

    Copy & paste the code below to embed this comment.
  8. hi all – thanks for the nice comments about my article! It makes me feel very happy to read them ;-)

    Some answers to your comments:

    @bzell – sorry about that – I forgot to add it to the article ;-) You can find the final version at http://people.opera.com/cmills/bling/

    @garrettmoon – thanks for the comment – it is nice to hear that you’ve had success with clients being accepting of browser differences and graceful degradation. This is the kind of attitude that I am really trying to push with the community and businesses in general. The old fashioned obsession with pixel perfect designs across all browsers really isn’t helping the Web evolve.

    @lojjic – thanks for the updates about what’s coming up in PIE, and simply, thank you for an awesome and really helpful piece of JS!

    @DougC – I feel your pain dude. At least PIE allows non-scripters like me to do this kind of thing more easily. If you just put it into your standard starting template, then it’s often no more work at all, beyond the initial set up.

    @Top Web Design Company – cheers!

    Copy & paste the code below to embed this comment.
  9. Really great article.
    Good idea to show cross platform compatibility for your coding because most of designers who uses new features of CSS3 often tend to forget about older browser, but as you said, except IE, all the famous browser usually get updated.
    Nice fix for Internet Explorer.

    Awesome reading!
    George.

    Copy & paste the code below to embed this comment.
  10. No matter what, I always have a problem, from CSS1 to 2 had issues with IE and various browsers, then they caught up, then on to three and more issues, finally, again, caught up. But with soooo many versions of browsers, soo many versions of css, it’s like i have to spend more time researching and testing, YUKK! personally, i just build simple stuff, lowest common denominator, until we all get along, i’m just going to wait.

    “)

    Copy & paste the code below to embed this comment.
  11. Thanks George!

    Copy & paste the code below to embed this comment.
  12. I can totally understand and respect your opinion here. I don’t think there is any right or wrong answer here, and you should always do what is best for you, as long as your work follows best practices such as accessibility, of course. I am pretty “Web 1.0” in my outlook, and will always choose accessibility/good SEO/flexibility etc. over gorgeous eye candy, if there is a choice.

    But when you can achieve the best of both worlds, as in case like my example here, without too much hacking/hassle, then I think “why not”?

    Copy & paste the code below to embed this comment.
  13. Excellent work George.

    I really think this should be a huge topic/central idea/crusade:

    ” ..if a user is browsing the web with JavaScript turned off, their web experience will be pretty crappy anyway, so the loss of a few visual effects is not going to dramatically affect them.” And furthermore I think that should go along with viewers who refuse to upgrade/switch their browsers.

    I also found the “Jan Henrik Helmers” link very interesting and creative.

    Good stuff sir. Kudos to you and your keyboard.

    -Graham
    alluringmedia.net

    Copy & paste the code below to embed this comment.
  14. FF3.6 supports gradients, box-shadow, and border-radius via the moz vendor prefix, e.g. -moz-border-radius.

    The big issue there is border-radius does not work for images, which you can work around by making a clipping path in SVG.

    Copy & paste the code below to embed this comment.
  15. Thanks for the comments Graham!

    Jan Henrik Helmers used to be one of our UI/graphic designers at Opera – a very talented chap.

    As for the central crusade – this is quite a contentious issue. Unfortunately for a number of people, it is not a case of refusing to upgrade or have JavaScript turned on – many people work in corporate/government environments where they are locked into such situations, due to mad security policies, or mission critical apps that only work on IE6 or 7.

    So generally, my attitude is “all functionality/content should be usable in all browsers, with JavaScript turned off, if at all possible”.

    “Styling? not so much.”

    Copy & paste the code below to embed this comment.
  16. thanks for the clarification stormsweeper – I will update my demo when I get the chance.

    Copy & paste the code below to embed this comment.
  17. Theres is some great stuff to watch and think about but for some of us implementation of it will be in the (hopefully) near future as there are just too many old browsers out there for business sites.

    Cheers though a great help

    Copy & paste the code below to embed this comment.
  18. Hi Chris,

    Good article, I’ve been toying with the idea of a html 5 / CSS3 rebuild for a client of mine. With a good chunk of the world gone iThis & iThat crazy scalable GUI’s are fast becoming a must have.

    As always using the benefits of the latest browsers creates design, layout and even display issues for the older ones. I however am of the old fashioned type and pixel perfection across as many possible browsers and platforms is a must!

    So I just wanted your opinion on possibly using a mix of CSS3 fontface and .svg images. Support of the later has pretty much rolled out across all browsers. Then I stumbled upon this piece of javascript by Alxis Deveria written way back in 2007! G@gle SVG Image and Background Image Replacer.

    Which would allow older browsers in theory to replace the .svg images with .pngs or .jpg’s without having to code CSS for older versions of IE.

    With the right mix of CSS3, @font_face, .svg and a dash of js maybe there is still some room left for pixel perfection? But more importantly a quick way to work around old browsers while playing to the strenghts of the new. Going to take a stab at this approach I’ll let you know how it pans out in a few weeks!

    Copy & paste the code below to embed this comment.
  19. Handy article, very nicely written. However, since reading Andy Clarke’s “Hardboiled Web Design”, my interests in the outdated browsers are at a minimum. I’ll browser test the layouts to make sure there are no mistakes with the actual build, but it doesn’t worry me if a design looks a little empty in certain browsers because of heavy CSS3 use.

    Copy & paste the code below to embed this comment.
  20. neDKeny: thanks for sharing your ideas here. I like your thinking, and woujld be interested in seeing how this pans out. SVG is a more and more viable solution for such things now, especially seen as IE is starting to include decent support now, and it is also pretty easy to fake support for, with solutions such as the Ggle SVG Image and Background Image Replacer you found.

    In terms of pixel perfection, I can understand the desire for a consistent look and feel across browsers/platforms, but I also think that it will be become less important, especially as it is become nigh on impossible to duplicate across alternative browsing devices such as mobiles.

    Copy & paste the code below to embed this comment.
  21. @JackS11: I tech edited Andy’s book, and really enjoyed it! I can totally respect your stance on this. It is a brave, bold stance, and great if you can get away with it. Don’t you ever get clients complaining because it doesn’t look the same on their Windows XP machine? I still have to think about fallbacks carefully – a lot of the design work I do is for friends’ bands and such, and I always seem to get half the band moaning because it looks crappy on their Windows box.

    It seems like every musician in the North of England uses bloody IE6/7/8 on Windows XP! So frustrating!

    The main problem I find is with designs that make heavy use of opacity, RGBa colours and the like. they can look really bad when the transparency fails. Of course, IE6 doesn’t even support transparent PNGs properly! Aaargh! ;-)

    Copy & paste the code below to embed this comment.
  22. Great piece!  Useful to see not only the variations but the renderings that go with them and doubly for the IE tips!

    Copy & paste the code below to embed this comment.
  23. That’s where educating the client comes into play. And if the client doesn’t “get it”, I simply won’t work for them.

    You should know how older browsers react when poked with CSS3 and you should, of course, test your sites in those browsers. But I don’t spend any more time trying to bend a project to pixel perfection.

    Your sites just shouldn’t look broken in those older clients. Their users won’t know they’re missing something anyway.

    The web has and will always be about the content. If the content is accessible by anyone on any machine, you’re in good shape.

    Just my opinion.

    Copy & paste the code below to embed this comment.
  24. For instance, the rounded corners do not work in Firefox versions before 4. Also, for gradients in IE, what are your feelings about using the Microsoft filter class in the CSS? Anyway, this is really useful, especially the CSSPie stuff, I hadn’t heard of that before. Thanks!

    Copy & paste the code below to embed this comment.
  25. I was a bit naughty and forgot to include -moz-box-shadow for older versions of FF. Try it!

    I don’t advocate using IE filters, as I think they are a relic of a bad old past, that we should cease propagating ;-)

    Copy & paste the code below to embed this comment.
  26. Thanks for sharing your opinion Rudolph – it is great to see you treading the bold path, and our jobs will become a whole lot easier when more designers/developers join you.

    Copy & paste the code below to embed this comment.
  27. We are starting to try and educate our “kent web design”:http://www.eonic.co.uk customers that it is OK to have the site looking better in one browser than another. But sometimes it is a hard sell, we do a lot of work for larger ad agencies and testing in all browsers is now so entrenched in some big agencies it is like turning an supertanker.

    Copy & paste the code below to embed this comment.
  28. Got me thinking and we have now published our policy on HTML5 and CSS3 for our customers…

    “Browser Compatibility Policy”:http://www.eonic.co.uk/About-Us/News/3982-/Making-the-most-of-HTML5-and-CSS3

    Thanks Chris

    Copy & paste the code below to embed this comment.
  29. I want to be part of this but my I have to stand by cross browser compatability…for now. Therefore more work…..not yet thanks.

    Copy & paste the code below to embed this comment.
  30. I am like those who stand by “cross browser compatibility” and think, as designers, we have to put how users will experience our contents before how easy it is for us to make them. Reading some comments regarding this topic made me think whom really those CSS features are for. (Those are really helpful by the way) Then I think those features cover somewhat minor design decisions, which could be even more insignificant from the viewers’ point, except cases that hinders display of actual content-mostly texts- like the case of showing no background color behind white text.

    And I think we as designers should listen to the customers whether they want their web to be for all browsers or not.

    Copy & paste the code below to embed this comment.
  31. Thank you for this article! I have been always stressed and overwhelmed by the fact that i should master javascript and even jQuery to create a beautiful website. Also constantly having to use photoshop and jpegs to add refined typography or animations seemed to be a hassle. It is great to hear that CSS3 is continuing to provide new features to make websites look cool in an easier and simpler way.
    Effects like text shadows, rounded corners, box shadows, gradients, and opacity are basic effects that designers often use to create websites. Why use multiple tools when it can be simply done with css?

    Even though there are kinks with CSS3 such as blurry shadows and some pixelations, it is definitely the right direction to make web designing more simple and easier to do and it only seems to be minor.

    And in terms of Internet Explorer, I wouldn’t count IE as a problem to CSS3 since IE seems to be unsupportive of a lot of new features. It is frustrating to constantly see new features one after the other stating “IE not supported” or “might not work as well under IE”

    Copy & paste the code below to embed this comment.
  32. For an amateur graphic designer such as myself, it is great to know that all of this information is readily available on the web. Thank you for the great article. It is great to know that you no longer have to deal with creating your own images and effects through image-editing programs like Photoshop. Small touches like rounded corners and drop shadows definitely have a huge effect on the overall aesthetic of any website, and it is great to be able to use these tools so easily through CSS. Although such simple effects are featured in your article, I am excited at the possibilities of new designs and tools to create a more aesthetically pleasing website through simple and pain-free additions to the code.
    It is interesting to see the comparisons between the browsers and how they display the same information. It seems as though Internet Explorer is rather far behind in terms of integrating web design. It seems that most web designers are using other browsers any way, and IE will eventually become obsolete as design is rapidly becoming the “next big thing.” Hopefully some day in the near future they will all be more designer-friendly and make the web a much more visually appealing place to be!

    Copy & paste the code below to embed this comment.
  33. I really appreciated the light-hearted and easily understandable way you have written this article in order to make head-scratching CSS for a beginner like me less intimidating. It is also great that you have linked to all examples where the CSS3 is running live. It is eye-opening to see all these new innovations and possibilities that can be done with CSS, no matter how eye-blinding and blingtastic they may be! The abilities to perform these little tricks live completely expand the way how website design can be presented. Nice that you also included the images of how it would look in different browsers incapable of handling all the blingtasticness, and how exactly to go about tackling this problem. It is sort of amusing even how much digging around and research has to be done in order to make the IE version the same as the others. As a web design beginner who does not know how to use jQuery or javascript at all, this is a wonderful way for me to increase my ability to create more dynamic-looking and appealing websites live without having to go back to Photoshop for every little change such as a color decision. Look forward to using these little tips and tricks soon in my own web design projects.

    Copy & paste the code below to embed this comment.
  34. It’s very exciting to see all the new things that can be done with CSS3, and great articles like this one make the cross-browser nightmare less daunting.

    I hope that we don’t all go overboard with CSS3 giddiness; as the new features become common knowledge, I’m envisioning a CSS3-pocalypse of body text set in display faces at low opacity, embossed and drop-shadowed on top of a red to green gradient backgrounded box with four different corner radiuses as well as inner and outer drop shadows. And the whole thing does a 360 on mouseover.

    I would love to see a companion piece to this on the aesthetics and tasteful application of CSS3 bling (is that an oxymoron?).

    Copy & paste the code below to embed this comment.
  35. Thanks for an insightful article! I am also glad that CSS is allowing for cross-compatability on browsers and opening doors for the way people view web pages. What is interesting to me is that CSS feels like it is always catching up to photoshop, like an outdated civilization trying to tap into all these great technologies that adobe has. It’s funny that we can celebrate the advent of a gradient on CSS when it’s been around for so long. But I don’t want to be a debbie-downer; I’m certainly glad that things are becoming more efficient for us through CSS3!

    I certainly enjoyed your ‘bling’ aesthetics in your post and laugh a little that that can come from simple coding. I’m slightly curious as to how many designers will begin decking out sights in gradients and drop-shadows just because they can. But who can blame them when it just looks so nifty?

    Copy & paste the code below to embed this comment.
  36. Why is it some people still insist in using old versions of IE such as IE 6 and 7? All they do is cause problems for us all when it comes to styling, no matter what CSS you use :(

    IE should just drop or kill anything below IE9 because thats the only version that dont take a long time to get to work with good standards.

    In fact, everyone thats still using something below IE9 should get a message saying it will self destruct in 24 hours if not updated to IE9 or even a better browser such as FF.

    Copy & paste the code below to embed this comment.