Over 16,533,178 people are on fubar.
What are you waiting for?
The code consists of three parts. Two partsThe 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>
text-shadow: rgb(187, 187, 187) 0px 1px 0px, rgb(181, 181, 181) 0px 2px 0px, rgb(172, 172, 172) 0px 3px 0px, rgb(160, 160, 160) 0px 4px 0px, rgb(145, 145, 145) 0px 5px 0px, rgb(127, 127, 127) 0px 6px 0px, rgba(0, 0, 0, 0.199219) 0px 7px 1px, rgba(0, 0, 0, 0.296875) 0px 8px 6px;
#letterpress h1 { text-shadow: 0px 1px 1px #4d4d4d; color: #222; font: 80px 'LeagueGothicRegular'; }
#cloud9 h1 { text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3); color: rgba(255,255,255,0); font: 80px 'ChunkFiveRegular'; }
#embossed h1 { text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; color: #9c8468; opacity: 0.3; font: 80px 'Museo700'; }
#citylights h1 { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95; letter-spacing: 5px; font: 80px 'MisoRegular'; }
#burning h1 { color: #fff; text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red; font: 80px 'BlackJackRegular'; }
#retro h1 { color: #d7ceb2; text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72; font: 80px 'BazarMedium'; letter-spacing: 10px; }
#three-d h1 { color: #fff; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; font: 80px 'ChunkFiveRegular'; }
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>
text-shadow: rgb(187, 187, 187) 0px 1px 0px, rgb(181, 181, 181) 0px 2px 0px, rgb(172, 172, 172) 0px 3px 0px, rgb(160, 160, 160) 0px 4px 0px, rgb(145, 145, 145) 0px 5px 0px, rgb(127, 127, 127) 0px 6px 0px, rgba(0, 0, 0, 0.199219) 0px 7px 1px, rgba(0, 0, 0, 0.296875) 0px 8px 6px;
#letterpress h1 { text-shadow: 0px 1px 1px #4d4d4d; color: #222; font: 80px 'LeagueGothicRegular'; }
#cloud9 h1 { text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3); color: rgba(255,255,255,0); font: 80px 'ChunkFiveRegular'; }
#embossed h1 { text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; color: #9c8468; opacity: 0.3; font: 80px 'Museo700'; }
#citylights h1 { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95; letter-spacing: 5px; font: 80px 'MisoRegular'; }
#burning h1 { color: #fff; text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red; font: 80px 'BlackJackRegular'; }
#retro h1 { color: #d7ceb2; text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72; font: 80px 'BazarMedium'; letter-spacing: 10px; }
#three-d h1 { color: #fff; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; font: 80px 'ChunkFiveRegular'; }
