Amazing 3D text with CSS only

I love typography and thanks to the useful new code bits in CSS3 we can do so much more with our iWeb site’s font than we ever could before. A few weeks ago I ran a tutorial explaining how you can get the Letterpress effect in iWeb using just CSS and an HTML snippet. Today’s post is similar except we are going 3D. And yes it is all in CSS, yes it is fully customizable to fit in with your iWeb site and yes I do provide the code for you so you can copy and paste straight into your iWeb site. Lets get cracking.

For a few examples of what can be achieved with this code take a look at the images below. I have included the code for all of the examples so if you have one that you like (or one that is almost there) you can
copy/paste give a little tweak and you are all set.

The effect is achieved by using the text-shadow tag in CSS3 and applying it multiple times to get this 3D effect. Each text shadow gets slightly dark as it gets further from the letter.

Editing the code is not too difficult so let’s take a look at how you can do it. In the screen shot below you can see the code I have used to get the blue text as in the image above.

Starting from the top, ignore the first few lines, you don’t need to touch them, so starting at the ‘font-family’ you can change this to suit your iWeb site. The next line ‘color’ refers to the color of the font itself, so in this instance blue. Next up the font size, I have chosen 6em as this is nice and big but you can choose any number you like. Font-weight refers to whether or not you want bold text, if not you can completely delete this line (or just replace ‘bold’ with ‘normal’ or ‘light’).

Then comes the text shadows and in all honesty you should really only change the top 5 as the other shadows (ie the rgba ones) are just generic ones to give a little lift to the text. You can see that the first shadow is set at 1px away from the font, the next 2px and so on. The color codes for each shadow get darker as they get further away from the font, as I said above.

If you work from the bottom up the line that is

<p>text in 3d</p>

is where you add your own text, just don’t delete the p tags.

If you need help with finding the right color codes for your 3D text you can take a look at this great page at Hex Hub which lists pretty much all of them.

You can download the codes for all of the 3D text examples above by clicking on this download link. All you have to do then is copy/paste to your HTML Snippet.

Have you used or are you going to use 3D text in your iWeb site? Leave a comment and let us know.