3D Text Tower

Have you seen David Desandro’s site? It’s pretty slick. His footer is especially fun:

The technique is clever in it’s simplicity. Let’s take a look.

Multiple Text Shadows

The major empowering concept here is the CSS3 property text-shadow. Typically it’s like this:

.shadow {
   text-shadow: 2px 2px 4px #000;
}

Those four properties being:

[X offset] [Y offset] [Blur size] [Color]

Notice there is no vendor prefixes, which is nice (Related: debate on vendor prefixes). You can also apply multiple shadows to the same text:

.shadow {
   text-shadow: 1px 1px 0 black, 
                2px 2px 0 black;
}

Multiple shadows happen by using a comma separated list. In the above code, there are two shadows, one offset by 1px on both axes with no blur, the second by 2px on both axes with no blur.

See the trick? We can apply multiple shadows, each offset by 1px from each other to build a “tower” style shadow below it. By default this would apply shadows deeper and deeper underneath the text, but we can appear to have it “pop up” by having the shadows only appear on hover and moving the text up and to the left the same depth of the shadow.

.shadow { 
   color: white; 
   font: bold 52px Helvetica, Arial, Sans-Serif;
   text-shadow: 1px 1px #fe4902, 
                2px 2px #fe4902, 
                3px 3px #fe4902;
}
.shadow:hover {
   position: relative; 
   top: -3px; 
   left: -3px; 
   text-shadow: 1px 1px #fe4902, 
                2px 2px #fe4902, 
                3px 3px #fe4902, 
                4px 4px #fe4902, 
                5px 5px #fe4902, 
                6px 6px #fe4902;
}

Transitions

As it stands with the above code, the rollover will instantly pop up the “tower” on rollover. But we can make it “grow up” instead, as most modern browsers are now supporting transitions (i.e. animation from one state of appearance to another). We don’t get so lucky with the vendor prefixes this time. There are three to cover:

.shadow { 
   color: white; 
   font: bold 52px Helvetica, Arial, Sans-Serif;
   text-shadow: 1px 1px #fe4902, 
                2px 2px #fe4902, 
                3px 3px #fe4902;
   -webkit-transition: all 0.12s ease-out;
   -moz-transition:    all 0.12s ease-out;
   -ms-transition:     all 0.12s ease-out;
   -o-transition:      all 0.12s ease-out;
}
.shadow:hover {
   position: relative; 
   top: -3px; 
   left: -3px; 
   text-shadow: 1px 1px #fe4902, 
                2px 2px #fe4902, 
                3px 3px #fe4902, 
                4px 4px #fe4902, 
                5px 5px #fe4902, 
                6px 6px #fe4902;
}

Note: See CanIUse.com for browser support of CSS transitions.

Fun with Scaling

The middle section of the footer has a different neat affect. As you roll over the different lines they grow in size. This is an other CSS3 effect: transform. Again with the vendor prefixes:

div:hover { 
   -webkit-transform: scale(1.1); 
   -moz-transform:    scale(1.1);
   -ms-transform:     scale(1.1); 
   -o-transform:      scale(1.1); 
   text-shadow: 3px 3px 0 #333; 
}

Fallbacks

So what happens in Internet Explorer? Text shadow won’t work, but the positioning will.

Demo and Download

View Demo   Download Files

If you plan to use this somewhere, be inspired by the idea and the technology, don’t just rip off David’s footer.