Text in firefox with css3 shadows

FF vs. IE: 3D text comparison with CSS3

If you’re still using Internet Explorer (IE) to browse the web, you don’t know what you’re missing. LITERALLY!

As a designer in today’s world of web, I can employ a vast array of CSS tricks to enhance my designs. I no longer need to create images for things like:

  • Gradients
  • Rounded corners
  • Drop shadows
  • Rotations (text or images)
  • …you get the point….

As designers of awesome, we face a serious problem… Internet Explorer does NOT support any of these cool new CSS3 tricks!

The Big Problem!

I design something cool looking for my client and tell them about how the use of the code will reduce the load time of the site, while still looking awesome.

My client views the site in IE and it looks like a child put it together in MS Paint! All because browsers will not auto update and Microsoft will not accept all CSS3 mark up!

Below are 2 screenshots of the same exact page in two different browsers (firefox and ie).

First up: FIREFOX


As you can see, the heading on the page (in the image) has a smooth 3D effect with a subtle drop shadow. The code is also set apart in a box with nice rounded corners. What you may not even have noticed was the soft gradient in the background of the page!

NICE! That’s CSS3!

Now: Internet Explorer


UGH! None of our cool CSS3 tricks work in internet explorer. Sure, there are complicated ways to add extra scripts and markup to get some CSS3 elements to work, but as web designers and developers, we shouldn’t have to bloat our code with extra nonsense!

The Solution
Please pass this on, INSTALL FIREFOX NOW! Make the internet a better place for everyone….

Ah, yes, the code

To get the same effect shown in the images, use the code below.

h1 {
  text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}