Grow your CSS skills. Land your dream job.

Quickie CSS3 Tricks with Fallbacks

Published by Chris Coyier

CSS3 can do some seriously neat stuff. Just check out some of the crazy 3D stuff you can do in WebKit. But as we all know, we need to be careful with what we choose to do with it. The most cutting edge techniques are fun to play with, but since since only a sliver of browsers support them fully, we can only use them in circumstances where they fall back to otherwise perfectly acceptable styling. Let's look at a couple of quick, simple, cheezy examples.

 

Growing Links

Scaling an element is really fun any easy with CSS3. We don't need CSS3 to do this, we could use relative positioning, offset the position, increase the width, height, and font size. But wow, that's a heck of a lot of work when we can just apply a scale factor and be done with it. These links get their corners more rounded and a bit of a drop shadow applied on hover as well.

.grower { 
    display: block;
    margin: 0 auto;
    width: 120px;
    padding: 2px 5px;
    border: 1px solid #2f2626;
    
    background: rgba(237,95,0,0.3); 
    -moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out; 
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}
.grower:hover { 
    background: rgba(237,95,0,1.0);
    border-color: rgba(237,95,0,1.0);

    -moz-transform: scale(1.2); 
    -webkit-transform: scale(1.2); 
    
    -moz-box-shadow: 0 0 20px black;
    -webkit-box-shadow: 0 0 20px black;
    
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
}

 

Blurred Edges

Using multiple shadows behind slightly transparent text can blurs the edges of text without the need of any images. A transition can fade the text out, track out the letters, and change the font size as well.

h3 { 
    height: 100px;
    font: bold 80px Helvetica, Sans-Serif;
    
    color: black; /* fallback */
    color: rgba(0,0,0,0.2);
    
    text-shadow: 
        0 0 2px rgba(0,0,0,0.2),
        0 0 4px rgba(0,0,0,0.2), 
        0 0 6px rgba(0,0,0,0.2); 
    -webkit-transition: all 0.2s linear;
}
h3:hover { 
    color: rgba(28, 28, 28, 0.2); 
    opacity: 0.8;
    letter-spacing: 15px; 
    font-size: 70px;
}

 

Elliptical Rounding

The poster child for progressive enhancement is border-radius. But did you know you don't have to create perfectly circular rounded corners? We'll create an oval here and give 'er a spin just for fun (WebKit only... Mozilla has syntax for transitions but isn't doing them yet).

.oval { 
    background: #fe4902; 
    width: 200px; 
    height: 100px; 
    line-height: 100px; 
    text-align: center;
    margin: 0 auto;
    
    /* Notice the slightly different syntax */
    -moz-border-radius: 100px / 50px; 
    -webkit-border-radius: 100px 50px;
    
    -webkit-transition: all 0.8s linear;
    -moz-transition: all 0.8s linear;  /* non functional just yet */
}
.oval:hover {
    -webkit-transform: rotate(720deg);
}

 

Multiple Backgrounds

If more widely supported, multiple backgrounds would be amazing timesavers. Alas, we can only use them for optional subtle enhancements now, where a fallback of nothing at all is acceptable.

body {
    background: 
        url(../images/top-right.png) top right fixed no-repeat, 
        url(../images/top-left.png) top left fixed no-repeat, 
        url(../images/bot-left.png) bottom left fixed no-repeat, 
        url(../images/bot-right.png) bottom right fixed no-repeat;
    background-color: #2f2626;
}

 

View Demo   Download Files

 

Comments

  1. Timo
    Permalink to comment#

    Hey Chris!

    awesome as every time. i really like the ghost font ^^ too sad that helloween is already over!

    greetz from germany
    timo

  2. Very cool. Always essential to have fallbacks, but I think I’ll be trying some of these little tricks out.

    Can’t everyone just upgrade their browsers, though?

  3. Permalink to comment#

    sorry these effect are work working in IE 8….but looks awesome in gecko browsers :)

  4. Permalink to comment#

    Hey Chris, thanks for the post – CSS3 is looking like it’s going to rock! As ever a shame about the necessary fallbacks but hey IE users just have to be catered for don’t they… do they? Nah, they should just use better browsers! Regards from a Brit in France.
    Steve.

  5. Permalink to comment#

    great post. How I long for multiple background support

  6. Permalink to comment#

    Excellent article once again Chris.

    CSS3 is gonna be awesome to play with when the time comes…

  7. Anthony
    Permalink to comment#

    Hey Chris, nice article!

    I can’t wait for CSS3 to become more widely supported (like a kid looking forward to Christmas when it’s still only January!)

  8. Permalink to comment#

    I seriously cannot wait for CSS3 to be in full effect. This is going to make web development that much more fun!

  9. Nice article, but I’d very much suggest that you first use standard CSS, and then browser vendor prefixes (-moz, -webkit, -o, -ms). As more browsers implements border-radius, and Gecko and Webkit drops their specific prefixes, your stylesheets should be future proof. This especially applies when writing example articles like this that people might copy/paste.


    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;

    Is the way I’d suggest.

    • Is the a browser that is supporting just “border-radius”? As soon as there is ONE I’ll start doing that.

    • carstep
      Permalink to comment#

      1. imagine you have 20x projects running that uses probably CSS3 related stuff. Would you change by every of them to use standard ways? I don’t think so, if you have a good manegment system /that takes care about CSS3 properties/ probably, but I guess you don’t have one.
      2. as browsers are updated almost daily basis you can’t say when will this happen

      r. Sandor

    • Permalink to comment#

      Future proofing is definitely a good way to go…

    • Permalink to comment#

      You could prepare your browser-specific CSS with a comment like:
      /* REMOVE LINE BELOW */

      Then search through the CSS files for “REMOVE”, then remove the line below (and the comment).

      Planning ahead is a good thing.

  10. Permalink to comment#

    Very nice article! I think things would be much easier and coding funnier if we had rounded corners fully supported.

  11. Great post.

    I’ve been looking into CSS3 loads recently and being able to visualise how the features look in older browsers is a great help!

    Thanks very much

  12. Permalink to comment#

    Great post and will try these on my current project.

    Really awesome work you do.

  13. Permalink to comment#

    beatuiful and inspire for me

  14. Permalink to comment#

    Why don’t you use -o-transition for Opera? BTW, I really like Growing Links! Awesome.

  15. thanks for this great tricks.

  16. Wow! Love the growing links! I’ve been using CSS3 (corners/drop shadows) for a few months, but nothing quite so cool as the growing links. And all w/o javascript. Awesome!

  17. grimdeath
    Permalink to comment#

    I love the pop up drop down selections, in fact I stumbled across it quite by accident. Ended up using it on a site I completed recently:

    http://www.allamericansupercarwash.com/

    Very fun :D

  18. Permalink to comment#

    hey, niiice article i have 2 say

  19. Neil Monroe
    Permalink to comment#

    Unfortunately, using CSS3 properties can invalidate your code.

    I fully support progressive enhancement techniques, so if this is a concern, I would suggest for the interim moving your enhanced properties out to a separate CSS file. This way, your main stylesheet will remain valid for the current CSS implementation.

    Name the extra stylesheet something like “enhanced.css” so that it will be obvious to whomever is checking that validity of the CSS that these styles are more advanced and may contain progressive properties.

    • I love that using it invalidates the CSS. Seriously, who is validating CSS? Who cares? It may be useful for discovering syntax errors, but that’s about the only reason I can think of.

    • You will just have to validate as CSS3 and you’re fine. Proprietary extensions are valid if prefixed properly (-moz etc) afaik.

    • Actually, vendor-specific extensions ARE invalid including when given the prefix(es), per the CSS2.1 spec – try the validitor yourself to see).

      So until the validator is updated in some way to handle these extensions, I agree with Neil that you can put vendor-specific rules in a separate stylesheet to keep your main CSS valid. But just to qualify: in my opinion, this level of CSS validation is only important for the QA process… CSS validation is not so much a badge of honor, but a tool.

  20. Does safari support CSS3? I would love to use this but considering a lot of my customers use IE then theres no point for the time being (this makes me sad) I wouldn’t be suprised if IE couldn’t support CSS3 for a long while yet. Reasons unknown. Wouldn’t it be great if IE just bought the rights to use the engine from firefox, what a beautiful web design world that would be! Great post though, will deff keep my eyes and ears open to it being used across multi platforms :]

    • Safari is leading the pack.

      And also remember that a browsers isn’t just CSS3 compatible or not. CSS3 is comprised of a lot of little parts that are rolling out over time in different browsers.

    • The drop shadow effect is the one id most welcome for multi platform availability. Fed up of having to use images for links or nice text with shadows. Is there anything else that can be used for this effect that will keep the SEO strong?

  21. Everyone who is saying “CSS3 will be awesome when the time comes” and “I can’t wait to use these things”: WAKE UP.

    These properties can be used NOW. The whole point of Chris’s article was how do you make sure crappy browsers (e.g. Internet Explorer) will still render things at an acceptable level, but give people with good browsers an extra treat? Using progressive enhancement, that’s how.

    So come out from under your rock, stop worrying that your design won’t look the exact same in every browser ever made, and start progressively enhancing your sites.

    /rant

  22. Permalink to comment#

    Great post! Can’t wait to start messing with it. Thank you!

  23. alan
    Permalink to comment#

    there is always “good old” JQ.

  24. Very nice effect. But the very old problem – Internet Explorer! I’d like to use these effect in my website, but IE doesn’t support (or less support) for CSS3. Can you make this works in IE 6+ using JS (like jQuery) please? That will be a complete guide :)

  25. Shane
    Permalink to comment#

    Love the post. Keep them coming :)

  26. Permalink to comment#

    Does Opera support any of these CSS3 features?

  27. Permalink to comment#

    Opera supports “zoom” css property. Can we use that to achieve Growing Links effect?

  28. Permalink to comment#

    Very nice. As always your posts always have valuable quality information. Awesome.

    This 3d thing is very new to me. I like the neat effects, especially the blur one :D

  29. Really good. Thank you.

  30. Growing Links do not work in IE6 ,7,8.neither border ,nor backgrond-color.As well as Blurred Edges also work bad in IEs.

  31. Great post, Linked from my site WebDesignExpert.Me

  32. Very good post. I like it. Though I don’t think that we should use CSS 3 right now as it is not official yet and is not supported by internet explorer.

    Once it becomes official then I would like to use it.

    One thing- the browser vendor prefixes should go and there should only be one rule for every browser.

  33. silvers
    Permalink to comment#

    loving it! css-tricks is such a great resource for learning and staying up to date with what’s going on in css. in many cases allowing you to stay ahead of the pack as well.

    one fear i had when i was starting to learn web design, was that by the time i got a grip on the basics, that what i had learnt might be out of date and i would constantly be dragging behind, trying to play catch up.

    luckily i stumbled across this website and since then have felt like i am right there with the rest of the runners!!!!

    thanks for these tricks, i like making my sites interactive and these nice little tricks definitely look sweet when you roll over them.

    also really appreciating “digging in to wordpress” as well.

  34. Permalink to comment#

    Unfortunately IE doesn’t want to work with this. There are lots of differences in interpretation for CSS2 still, so will takes years till everything will be fine between IE and CSS3. Or maybe IE will just die as all of us want :)

  35. Permalink to comment#

    God, I can’t wait until CSS3. And I detest IE; I’m glad that users in Europe at least will be allowed to choose. I wish that we could have a similar monopoly-breaker over here.

    Fall-back looks seriously cool; I just hope that all browsers start adopting the border-radius property here soon so that we can stop “hacking” to get nice, rounded corners.

    • Jeremy
      Permalink to comment#

      Here, here! I am exasperated by this on a daily basis. I understand the reasons, but it still seems absurd to me that we don’t yet have this universally supported.

  36. Permalink to comment#

    border-radius is probably the most overhyped property I have ever seen, its application is moribund at best…

    • Check out: http://www.uiandus.com/imported-20091116110904/2009/7/26/realizations-of-rounded-rectangles.html

      Particularly the paragraph:

      Time for an expert: I asked Professor Jürg Nänni, author of the exemplary Visual Perception, a book detailing our best-to-date scientific understanding of the processes involved in visual cognition. “Could rounded rectangles actually take less effort to see?”
      Nänni confirmed my theory: “You are absolutely right. A rectangle with sharp edges takes indeed a little bit more cognitive visible effort than for example an ellipse of the same size. Our “fovea-eye” is even faster in recording a circle. Edges involve additional neuronal image tools. The process is therefore slowed down.”

  37. Interesting article Chris.

    If it exists then use the official CSS3 declarations.
    If only for future proofing.
    Though perhaps the declaration should be stated last not first.

    Maybe the article should include IE fall-backs too?
    Have you considered zoom for transition, and filters for blurred edges?

  38. Permalink to comment#

    I’ll be happy when IE 9 is released. Although when you’re in the web business you’re not quite as worried about all the fanciness being seen on your personal site. At least I’m not. Don’t get me wrong, it still has to look good.

  39. Permalink to comment#

    I will be happy when IE 6 is destroyed, been the bain of my life for a while!!!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".