Comments on CSS3 Bling in the Real World

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. 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.
  3. 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.
  4. 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.
  5. 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.
  6. Thank you Chris. Great Article. CSS3 is awesome!

    Copy & paste the code below to embed this comment.
  7. 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!

    Copy & paste the code below to embed this comment.
  8. 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.
  9. 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.


    Copy & paste the code below to embed this comment.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. We are starting to try and educate our “kent web design”: 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.
  18. Got me thinking and we have now published our policy on HTML5 and CSS3 for our customers…

    “Browser Compatibility Policy”:

    Thanks Chris

    Copy & paste the code below to embed this comment.
  19. 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.
  20. 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.
  21. 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.
  22. 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.
  23. 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.
  24. 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.
  25. 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.
  26. 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.
  27. Sorry, commenting is closed on this article.