Creating Animated 3D Popping Text in CSS3

This bit of code that I recently discovered belongs in the category of, “Really Cool Stuff That I Have Yet to Find a Real Use For.” Yes, that is a long title for a category that exists only in my mind, but for what I’m about to show you, it’s very apropos. Basically, this CSS3 code allows you to create animated text that literally pops off the page. You might find it useful for when you use text for your logo (as compared to using an image) that’s not mixed within a paragraph. However you choose to use it, it’s sure to grab the interest of your visitors.

Two Parts CSS and One Part HTML

The code consists of three parts. Two parts belong in your CSS and the third part is in your HTM file.

Let’s start with the static span class. Here’s the code:

.threedtext {
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 48px;
    font-weight: bold;
    text-shadow: #afe222 1px 1px, #000 2px 2px, #000 3px 3px;
    position: relative;
    -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
            -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

The above code starts by defining the color of the font, font family, size and the weight. A bold attribute was added to increase the effect of the 3D transition. Next, the code defines the text’s shadow and the positioning of the shadow, along with the color. This bit of code is where you can experiment with where you want the shadow to appear around the letters and the color of the shadow. Don’t forget to add in the position element, or there will be problems with the animation. The last few lines of the code are vendor-specific, which means this 3D animation affect will not work on all browsers. For Internet Explorer, you’ll get the pop effect, but you won’t see the colors.

Next, let’s look at the code for the hover affect.

.threedtext:hover {
    color: #FFF;
text-shadow: #afe222 1px 1px, #afe222 2px 2px, #afe222 3px 3px, #B7BDC8 4px 4px,
#B7BDC8 5px 5px, #B7BDC8 6px 6px;
    left: -6px;
    top: -6px;
}

This code is basically all about color, thickness and positioning. You can change the last two lines of code to read ‘right’ or ‘bottom’ to have the text pop in different directions.

You might notice that I used a different color for the text font, and then two more colors for the 3D shadow effect. This was done for a couple of reasons. It shows where the different parts of the 3D affect begins and ends; and I also feel the bottom color provides a base for the text.

To add this to your page, you simply refer to the span class:

<span class=”threedtext”>Put Your Text Here</span>

To see a sample of this 3D Text Popping, you can look here, where I’ve started a playground of sorts that showcases several different CSS3 tricks, including animated buttons and an animated png graphic.