Quickie CSS3 Tricks with Fallbacks

Avatar of Chris Coyier
Chris Coyier on

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