STYLE SHEETS

CSS3 Text Effects

In this CSS (cascading style sheet) tutorial, you will learn how to create text effects using the text-shadow property.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

August 16, 2011

Considering the momentum it has gained in the last few months, CSS3 has undeniably shaken the calm waters of traditional web design - and with good reason: the new standard sports a set of brand new properties that allow you to perform all manner of clever tasks on web pages, ranging from rendering native, imageless rounded corners and appealing gradients, to dropping stylish shadows around boxes and text; the list goes on and on.

However, the web’s fast changing and dynamic nature is a double-edged sword. While it’s fair to admit that many of these features quickly found a privileged place in the toolbox of most web designers, the truth is that a few others got bored and tried to find new, more creative uses for them, and - to be frank - the result of this search has yielded some impressive results.

Want a glaring example of this? When used in a “typical” fashion, the “text-shadow” property will let you add a single shadow to the text of a web page element, which is well and fine, as you can control several aspects of the overall shading effect, like the color, blur, and its position around the text. What many ignore (myself included) was that it’s possible to use the property for dropping multiple shadows, simply by separating each one with a comma in the style declaration. This simple - yet effective - approach can be used, among other things, to render eye-catching text effects that in the old days were possible to create only by using an image editing program.

Of course, the best manner to learn how to take the functionality of “text-shadow” to the next level is with some hands-on examples. With that idea in mind, in this two-part tutorial I’ll be setting up a few, which will show you how to utilize the property for rendering pretty, realistic 3D text, neon, and inset effects, all without having to open Photoshop.

Getting Started: Building a Basic Web Page

As the old saying goes, a long walk starts with a small step. So, in this case, the first step that must be taken is to create a basic web page that contains an element which can be easily decorated with the “text-shadow” CSS3 property. To keep things easy to follow, the element will be a plain H2 tag; it’s possible, though, to pick up a different selector, if that makes you feel a bit more comfortable.

Having said that, here’s how this sample page looks:

As seen above, the previous page includes a single H2 element and a few trivial paragraphs. The structure of this document is so trivial that it’s not worth spending time explaining how it works. Therefore, it’s the perfect time to move on and turn the text of the mentioned element into something a bit more attractive via CSS3.

The workhorse of this styling process will be the “text-shadow” property. Given that, in the coming segment, I’ll be attaching the property to the earlier H2 selector, in order to transform it into a pretty realistic 3D text.

Making the Previous H2 Element Look More Engaging: Creating a Stylish 3D Effect

Like many other people out there, I was aware of the average functionality offered by the “text-shadow” property, which is quite remarkable indeed. Nevertheless, this excellent post by Chris Coyier (http://css-tricks.com/6023-3d-text-tower/) made me realize that it was possible to use the property for rendering multiple shadows around the text of a web page element and create appealing 3D effects.

So, based on the approach taken by Mark Otto here (http://www.markdotto.com/2011/01/05/3d-text-using-just-css/), I decided to be adventurous and adapt it to use it with my sample web page. Once I set up my own tweaks, here’s how I turned the page’s H2 element into a cool 3D text:

/* 3D text effect with the 'text-shadow' property */
h2 {
    width: 750px;
    padding: 15px;
    margin: 40px 0 40px 0;
    background: #E2FBDE;
    font: bold 10em "Cabin", Arial, Helvetica, sans-serif;
    color: #1DAf05;
    text-shadow: 0 -1px 0 #76BD6B,
                 0 -2px 0 #76BD6B,
                 0 -3px 0 #66A45C,
                 0 -4px 0 #66A45C,
                 0 -5px 0 #55894C,
                 0 -6px 0 #446E3C,
                 0 -6px 1px #3D6336,
                 0 0 3px #3D6336,
                 0 -1px 3px #3D6336,
                 0 -3px 5px #2B4626,
                 0 -5px 10px #2B4626,
                 4px -6px 15px #000;
    border: 1px solid #36572F;
}

From the above example, it’s clear to see that the 3D text was created simply by adding several shadows to the target selector, in different positions, colors and with disparate levels of blur.

In addition, you may have noticed that I used “Cabin” as the primary typeface for rendering the text in question. If you’re wondering where this comes from, don’t worry, as it’s part of the directory provided by Google Web Fonts (http://www.google.com/webfonts#HomePlace:home). Feel free to take a quick peek at it, if you want to pick up a different font from the service’s library.

Having explained how simple it is to build eye-catching 3D effects with the “text-shadow” property, the only thing left to do is to add the earlier styles to the sample web page we coded before, so you can see how the target H2 element looks after spicing up its visual presentation.

Assembling of the Pieces: Showing the Finished Version of the Text Effect

If you’re anything like me, you probably want to see how the previous H2 header is rendered on screen after applying a 3D text effect to it. Well, fear not and take a look at the below code fragment, which also downloads the “Cabin” font from Google’s directory:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Building a 3D text effect with the 'text-shadow' property</title>
<link href="http://fonts.googleapis.com/css?family=Cabin:regular,bold&v1" rel="stylesheet" type="text/css">
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-size: 3.5em;
    font-weight: bold;
}
/* 3D text effect with the 'text-shadow' property */
h2 {
    width: 750px;
    padding: 15px;
    margin: 40px 0 40px 0;
    background: #E2FBDE;
    font: bold 10em "Cabin", Arial, Helvetica, sans-serif;
    color: #1DAf05;
    text-shadow: 0 -1px 0 #76BD6B,
                 0 -2px 0 #76BD6B,
                 0 -3px 0 #66A45C,
                 0 -4px 0 #66A45C,
                 0 -5px 0 #55894C,
                 0 -6px 0 #446E3C,
                 0 -6px 1px #3D6336,
                 0 0 3px #3D6336,
                 0 -1px 3px #3D6336,
                 0 -3px 5px #2B4626,
                 0 -5px 10px #2B4626,
                 4px -6px 15px #000;
    border: 1px solid #36572F;
}
#wrapper {
    width: 660px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Building text effects with the 'text-shadow' property</h1>
    <h2>Sample text</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
</div>
</body>
</html>

If you launch your browser (keep in mind that Internet Explorer doesn’t support CSS3 shadows) and try out the above web page, the selected H2 element should look similar to the one shown by the following snapshot:

That looks really amazing, right? It’s hard to believe, but the functionality of the “text-shadow” property is the only thing that you’ll need to have to create this and other types of text effects. Of course, the major pitfall with this approach is that IE, as one might expect, proudly ignores the property. So, if you’re planning to use this technique for styling some heading elements on your web pages, be sure to implement the appropriate fallbacks.

Final Thoughts

In this introductory part of this two-part tutorial, I demonstrated how easy it is to add an impressive 3D effect to elements of a web page by taking advantage of the “text-shadow” CSS3 property. As you just saw, the whole styling process is pretty straightforward, which means that you shouldn’t have major troubles implementing it on your own (X)HTML documents.

Also, it’s worth noting that the property can be used for rendering a few other appealing text effects with relative ease. With that said, in the final installment I’ll be showing you how to utilize the functionality provided by “text-shadow”, but this time for creating neon and inset effects.

Don’t miss the last part!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All Style Sheets Tutorials
More By Alejandro Gervasio