God isn't bland. The Church shouldn't be, either.
Why Wait for the Good Stuff?

I think it’s safe to say that I’ve been clear about my feelings toward Internet Explorer in the past (spoiler: I want it to die a quick, painful death). Although Internet Explorer 8 isn’t nearly as much of a pain as its previous iterations, it still lags behind its contemporaries in its support of some really cool new web technologies.

In the past, I’ve been a stickler for making things look identical in every web browser, which limited a lot of my design options to the capabilities of a browser created in 2001. I’ve changed my views on this over the last year or so, and have been adding touches and flourishes that are only seen in a modern web browser (but degrade gracefully if you’re still stuck in IE). As I’ve poured a huge amount of time into a MediaSalt project over the past few months (much more on this very soon), I’ve discovered a small handful of helpful CSS 3 tweaks that are widely supported in Firefox, and Safari/Chrome/other WebKit browsers. Without further ado, here are some fun new tweaks to experiment with…

Shadows

WIth CSS3, it’s looking like we’re going to be able to save a lot of time and bandwidth through a much more convenient way to implement shadows… Check out the boxes below (the required CSS is listed in the box)…

-moz-box-shadow: 2px 2px 0 #000;
-webkit-box-shadow: 2px 2px 0 #000;
-moz-box-shadow: 3px 3px 3px #000;
-webkit-box-shadow: 3px 3px 3px #000;

Pretty cool right? The first two pixel values control the position of the shadow, the last pixel value controls the feather of the shadow, and the hex color at the end controls the shadow color itself. But what if you want to add a shadow to something like text? It’s just as easy.

text-shadow: 2px 2px #000;

Rounded Corners

Now that you’re excited about using CSS shadows on your next project, you might want to sit down for this one… It’s ridiculously easy to to add rounded corners to just about any page element with CSS3! Check it out…

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px 0 10px 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px

WIth the exception of the last example, you can use similar CSS to target each browser. If you want to target specific corners, you’ll need to follow the separate browser-specific syntax listed in the last example.

Wait a Second…

Isn’t this going to render my Stylesheet invalid? Isn’t it bad practice to use browser-specific code?

Yes, your stylesheet will technically be invalid, but the code you’re adding isn’t a hack; it’s an already-widely-supported emerging standard. Although these are using temporarily browser-specific CSS, the rules themselves are based off of up-and-coming coding standards that are just over the horizon. In other words, they look great and work great now, so why not use them?

Have fun experimenting, but remember that restraint is the key to good design; everything is best in moderation :-)

Share on TwitterShare on TumblrShare via email


  1. Reuben Urias (Reply) on January 18th, 2010

    I can dig it!

  2. [...] you seen some of the cool effects you can pull off in CSS3? Maybe you read Eric’s article a while back on the [...]

  3. [...] Why Wait for the Good Stuff? [...]


Connect with Facebook