CSS-Tricks

Quickie CSS3 Tricks with Fallbacks

Chris Coyier — Fri, 06 Nov 2009 11:45:39 +0000

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

New Poll: How do you format your CSS?

Chris Coyier — Wed, 04 Nov 2009 13:33:03 +0000

The poll is in the sidebar, so jump down there to vote. You can see examples of the different ways to format CSS here. I think that covers most of the popular ways to format CSS, but if you have your own unique way, feel free to post some code or a link to an example CSS file in the comments!

I think it’s an interesting topic because us all the implications it may have on a site and the working life of the front end coder. We spend so much time in CSS that how we choose to format it affects how efficiently we can write it, how easily re-acquainted we are with old CSS, and even potentially page loading times assuming you don’t compress your CSS.

Poll Results: When Do Jobs Get Done?

Chris Coyier — Tue, 03 Nov 2009 19:00:49 +0000

When this poll first kicked off, the “late” options were way ahead. Over time, things have evened off a bit, and the results are closer than I thought they might be.

If you are in the on time or early crowd, congrats! That means you are really good at estimating project completion times. For the rest of us, that means we should start pushing those dates back a little further than we do now. Of course, meeting deadlines is reliant upon both our working speed and our clients ability to communicate, but we are the ones issuing the completion dates, so it’s our job to anticipate these things. And you know what they say, under-promise and over-deliver.

New poll later this week.

Holy Sprites

Chris Coyier — Mon, 02 Nov 2009 11:39:46 +0000

Lots of folks joined in on the fun with the Show Off Your Sprites! contest. I used the ol’ random number generator and came up with Lee Kowalkowski as the big winner, congrats Lee! Now let’s take a look at some of the submissions. Looking at sprites I find strangely fascinating. It’s like this strange secret language of the web that only us performance nerds really understand =)

Some of these may have been cropped or resized. They aren’t meant to be taken and used, I just hope they serve as an inspirational spark!

If you just look through all these and were like “Uhmm, what the heck was that?” Those are called CSS Sprites and you can learn about them here.

Redesigned Personal Site

Chris Coyier — Fri, 30 Oct 2009 11:46:39 +0000

As I do from time to time, I redesigned my personal site (redesign notes). I wanted to make the site a better vessel for writing, so the shell of the site has a much nicer structure for doing that. It’s 100% WordPress of course. I did break one major rule: the design is a complete overhaul of the previous site, rather than an evolutionary step. I just felt like evolution wasn’t going to cut it this time. And besides, this is a low-traffic, personal site, not major news portal or web app or anything where the “Who moved my cheese?” phenomenon is much stronger.

In typical web design, a generic template is used for articles. Images may be dropped in, but by and large, each article follows the same structure. If you are familiar with WordPress, think of the single.php file, which serves as the template for all blog post articles on the whole site. There may be nothing wrong with that for a lot of sites. This site is like that, by and large.

Of course all of you have heard of Jason Santa Maria and his website. Jason’s idea is that web design doesn’t have to be like that (even CMS driven sites). He says that web design can learn a lot from print design, in the care and craft that goes into publishing content in that media (e.g. a magazine). Articles throughout a magazine may have similar characteristics, but each one will have also have design choices that suit the content it is serving. Perhaps large graphics, text wrapping around images, multiple columns, different colors and title styles, could be anything.

The idea is coming to be known as ‘Art directing on the web’. Jason is a great example, but check out Dustin Curtis as well. This isn’t just a fad, it’s just good, timeless design. I’m going to try and get on board myself with the new blog. Not every single thing I write will be a complete transformation, and some may have none at all. I like my base template just fine and it will accommodate quick writings just fine. But when I have the time an inclination, this new site will be a fun base to build around.

Here are some recent posts I’ve played with a bit.

List of Post Apocalyptic Movies

Grooveshark on the iPhone

10 years of Simutronics

So how is it done?

Well if you aren’t using a CMS, it’s easy, just design away. If you are using a CMS, there is already a template in place which you means you need to “fight” against the existing CSS. I’m using WordPress, and I think the easiest way to accomplish it on that platform is through the art direction plugin.

This plugin adds a box to the post editor with two fields. One for code to insert on any page the post appears, and the other for code to insert only when the page is viewed in it’s single form.

With that code dropped into the right box, that code is now inserted into the of the page when it’s loaded.

Because this comes after the CSS file, identical selectors are overwritten by these. No fancy !important stuff needed. Important to note here, is that whatever goes in these boxes gets inserted. It doesn’t have to be a