Home arrow Style Sheets arrow Creating More Text Effects with CSS3
STYLE SHEETS

Creating More Text Effects with CSS3


In this cascading style sheets tutorial, you will be learning how to create inset and neon text effects using CSS3.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
August 23, 2011

print this article
SEARCH DEVARTICLES

In this cascading style sheets tutorial, you will be learning how to create inset and neon text effects using CSS3.

While it’s fair to admit that the functionality of the “text-shadow” CSS3 property is pretty remarkable (it allows you to easily decorate text-based web page elements with native shadows), the truth is that this isn't particularly interesting, as most web designers see this ability as the property’s expected behavior (after all, that’s exactly what it’s supposed to do, right?).

First impressions, however, tend to be a little misleading and such is the case with “text-shadow”, as the property can also be used to add multiple shadows to a target selector simply by separating each assignation with a comma within the rule declaration. This “hidden” capability permits you, among other things, to create all sorts of appealing effects on (X)HTML documents, ranging from 3D characters, to neon, frozen, and inset-like text - the possibilities are endless.

To demonstrate that the implementation of a 3D effect using the “text-shadow” property is fairly simple, in the first part of this series, I developed an introductory example, which showed how to add the effect to an H2 element of a sample web page. The whole styling process was limited to adding several shadows around the target element, and assigning different offsets, levels of blur, and colors.

If you missed that part, or would like to revisit it, you can find it here:

http://www.devarticles.com/c/a/Web-Style-Sheets/CSS3-Text-Effects/

This clever use of the property allows you to build a few other interesting text effects with the same ease. In line with this, in this final installment I’ll be setting up a couple of additional code samples, which will show you how to build neon and inset text effects in a few simple, easy-to-follow steps.

A Quick Recap: Building a 3D Effect Using Multiple Shadows

In case you decided to skip the previous part, where I explained how to polish the visual presentation of an H2 element with an eye-catching 3D effect, below I reintroduced the example created in that occasion, so that you can analyze it in detail and grasp its underlying logic. Here it is:

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>&quot;>

<html xmlns=&quot;<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>&quot;>

<head>

<meta http-equiv=&quot;Content-Type&quotcontent=&quot;text/htmlcharset=utf-8&quot; />

<title>Building a 3D text effect with the 'text-shadow' property</title>

<link href=&quot;<a href="http://fonts.googleapis.com/css?family=Cabin:regular,bold&v1">http://fonts.googleapis.com/css?family=Cabin:regular,bold&v1</a>&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>

<style type=&quot;text/css&quot;>

body 
{

    padding
0;

    margin
0;

    background
#fff;

    
font0.8em ArialHelveticasans-serif;

    color
#000;

}

h1 
{

    font
-size3.5em;

    font
-weightbold;

}

/* 3D text effect with the 'text-shadow' property */

h2 
{

    width
750px;

    padding
15px;

    margin
40px 0 40px 0;

    background
#E2FBDE;

    
fontbold 10em &quot;Cabin&quot;, ArialHelveticasans-serif;

    color
#1DAf05;

    
text-shadow-1px 0 #76BD6B,

                 
-2px 0 #76BD6B, 

                 
-3px 0 #66A45C, 

                 
-4px 0 #66A45C, 

                 
-5px 0 #55894C,  

                 
-6px 0 #446E3C,

                 
-6px 1px #3D6336, 

                 
0 0 3px #3D6336, 

                 
-1px 3px #3D6336, 

                 
-3px 5px #2B4626, 

                 
-5px 10px #2B4626, 

                 
4px -6px 15px #000;

    
border1px solid #36572F;   

}

#wrapper {

    
width660px;

    margin
0 auto;

}

</style>

</head>

<body>

<div id=&quot;wrapper&quot;>

    
<h1>Building text effects with the 'text-shadow' property</h1>

    
<h2>Sample text</h2>

    
<p>Lorem ipsum dolor sit ametconsectetur adipiscing elitSuspendisse auctor commodo risuset ultrices sapien vestibulum nonMaecenas scelerisque quam a nulla mattis tinciduntEtiam massa liberopharetra vel laoreet etultrices non leoLorem ipsum dolor sit ametconsectetur adipiscing elitSed posuere ullamcorper lacus et sollicitudinMorbi ultrices condimentum lacussit amet venenatis purus bibendum sit amet.</p>

    
<p>Lorem ipsum dolor sit ametconsectetur adipiscing elitSuspendisse auctor commodo risuset ultrices sapien vestibulum nonMaecenas scelerisque quam a nulla mattis tinciduntEtiam massa liberopharetra vel laoreet etultrices non leoLorem ipsum dolor sit ametconsectetur adipiscing elitSed posuere ullamcorper lacus et sollicitudinMorbi ultrices condimentum lacussit amet venenatis purus bibendum sit amet.</p>

    
<p>Lorem ipsum dolor sit ametconsectetur adipiscing elitSuspendisse auctor commodo risuset ultrices sapien vestibulum nonMaecenas scelerisque quam a nulla mattis tinciduntEtiam massa liberopharetra vel laoreet etultrices non leoLorem ipsum dolor sit ametconsectetur adipiscing elitSed posuere ullamcorper lacus et sollicitudinMorbi ultrices condimentum lacussit amet venenatis purus bibendum sit amet.</p>

</div>

</body>

</html>

As I explained earlier, the 3D effect added to the above H2 element has been built by adding a bunch of different colored shadows, blurs, and positions. Of course, the implementation of this somewhat complex effect requires patience and careful planning of how each shadow will be individually rendered (something currently automated in most software editing applications). In either case, it’s worth the effort; if you try the example in your own browser (with the exception of Internet Explorer, which happily ignores CSS3 shadows), you should get the following output:


Here, it’s clear to see that the capabilities offered by the “text-shadow” property can be used for creating all sorts of clever text effects, other than the classic ones showcased in so many tutorials out there. And speaking of clever effects, you already learned how to build 3D text without having to rely upon any background image; but is that all that can be accomplished with the property? Not at all!

By assigning multiple shadows to the target elements(s), it’s feasible to implement other text effects, including the popular inset and neon that you’ve probably seen dozens of times before. With that said, in the following section I’ll be developing another example, which will show you how to create the former in a jiffy.

Going One Step Further: Creating an Inset-Like Fffect

Creating an inset-like effect with the “text-shadow” property doesn’t differ too much from rendering 3D text; the process is reduced to assigning multiple shadows to the target element with the appropriate values of blur, color and offsets.

Naturally, the best way to demonstrate this concept is by example. Thus, below I coded a basic one, which applies the inset effect to the same H2 header that you saw previously. Check it out:

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>&quot;>

<html xmlns=&quot;<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>&quot;>

<head>

<meta http-equiv=&quot;Content-Type&quotcontent=&quot;text/htmlcharset=utf-8&quot; />

<title>Building text effects with the 'text-shadow' property (Inset effect)</title>

<style type=&quot;text/css&quot;>

body 
{

    padding
0;

    margin
0;

    background
#fff;

    
font0.8em ArialHelveticasans-serif;

    color
#000;

}

h1 
{

    font
-size3.5em;

    font
-weightbold;

}

/* Inset text-effect with the 'text-shadow' property */

h2 
{

    width
750px;

    padding
15px;

    margin
40px 0 40px 0;

    background
#AB5406;

    
font-weightbold;

    color
#733703;

    
font-size10em;

    text
-shadow-2px 0 #F99943, 

                 
0 2px 3px #CD6406; 

    
border1px solid #733703;   

}

#wrapper {

    
width660px;

    margin
0 auto;

}

</style>

</head>

<body>

<div id=&quot;wrapper&quot;>

    
<h1>Building text effects with the 'text-shadow' property</h1>

    
<h2>Sample text</h2>

    
<p>Lorem ipsum dolor sit ametconsectetur adipiscing elitSuspendisse auctor commodo risuset ultrices sapien vestibulum nonMaecenas scelerisque quam a nulla mattis tinciduntEtiam massa liberopharetra vel laoreet etultrices non leoLorem ipsum dolor sit ametconsectetur adipiscing elitSed posuere ullamcorper lacus et sollicitudinMorbi ultrices condimentum lacussit amet venenatis purus bibendum sit amet.</p>

    
<p>Lorem ipsum dolor sit ametconsectetur adipiscing elitSuspendisse auctor commodo risuset ultrices sapien vestibulum nonMaecenas scelerisque quam a nulla mattis tinciduntEtiam massa liberopharetra vel laoreet etultrices non leoLorem ipsum dolor sit ametconsectetur adipiscing elitSed posuere ullamcorper lacus et sollicitudinMorbi ultrices condimentum lacussit amet venenatis purus bibendum sit amet.</p>

</div>

</body>

</html>

As the above code fragment shows, the inset effect has been created by adding a couple of shadows to the H2 element - the first one is solid (notice the value 0 given to its blur argument), while the last one has been slightly blurred. This simple approach allows you to generate the desired effect, which when rendered by a browser that supports CSS3 shadows, looks like this:


As you can see, adding an inset-like effect to one or multiple web page elements is a breeze, thanks to the use of the “text-shadow” property. But, wait a minute! As you’ll recall from the introduction, I expressed that it was possible to utilize the property for generating neon text as well.

Creating this type of effect can be achieved by surrounding the target selector with different shadows, pretty similar to the approach implemented for building 3D text. Given that, in the upcoming section I’ll be setting up a final example, which will demonstrate how to decorate the earlier H2 element with some engaging neon lights.

Developing a Final Example: Creating Neon Text

Creating neon text with the “text-shadow” property is much simpler than one might think. Again, the process is limited to assigning several shadows to the selected HTML element, with different colors, blurs and positions.

Take a peek at the following snippet, which creates the mentioned neon effect in a few simple steps:

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>&quot;>

<html xmlns=&quot;<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>&quot;>

<head>

<meta http-equiv=&quot;Content-Type&quotcontent=&quot;text/htmlcharset=utf-8&quot; />

<title>Building text effects with 'text-shadow' property (Neon effect)</title>

<link href=&quot;<a href="http://fonts.googleapis.com/css?family=Open+Sans&v1">http://fonts.googleapis.com/css?family=Open+Sans&v1</a>&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>

<style type=&quot;text/css&quot;>

body 
{

    padding
0;

    margin
0;

    background
#fff;

    
font0.8em ArialHelveticasans-serif;

    color
#000;

}

h1 
{

    font
-size3.5em;

    font
-weightbold;

}

/* Neon text-effect with the 'text-shadow' property */

h2 
{

    width
750px;

    padding
15px;

    margin
40px 0 40px 0;

    background
#000;

    
fontnormal 10em &quot;Open Sans&quot;, ArialHelveticasans-serif;

    color
#fff;

    
text-shadow0 0 10px #00CCFF, 

                 
0 0 20px #00CCFF, 

                 
0 0 30px #00CCFF, 

                 
0 0 40px #7DBEFF, 

                 
0 0 60px #7DBEFF, 

                 
0 0 80px #7DBEFF; 

    
border1px solid #733703;   

}

#wrapper {

    
width660px;

    margin
0 auto;

}

</style>

</head>

<body>

<div id=&quot;wrapper&quot;>

    
<h1>Building text effects with the 'text-shadow' property</h1>

    
<h2>Sample text</h2>

    
<p>Lorem ipsum dolor sit ametconsectetur adipiscing elitSuspendisse auctor commodo risuset ultrices sapien vestibulum nonMaecenas scelerisque quam a nulla mattis tinciduntEtiam massa liberopharetra vel laoreet etultrices non leoLorem ipsum dolor sit ametconsectetur adipiscing elitSed posuere ullamcorper lacus et sollicitudinMorbi ultrices condimentum lacussit amet venenatis purus bibendum sit amet.</p>

    
<p>Lorem ipsum dolor sit ametconsectetur adipiscing elitSuspendisse auctor commodo risuset ultrices sapien vestibulum nonMaecenas scelerisque quam a nulla mattis tinciduntEtiam massa liberopharetra vel laoreet etultrices non leoLorem ipsum dolor sit ametconsectetur adipiscing elitSed posuere ullamcorper lacus et sollicitudinMorbi ultrices condimentum lacussit amet venenatis purus bibendum sit amet.</p>

</div>

</body>

</html>

The neon effect has been created by assigning high values of blur to the corresponding shadows, which have been positioned around the target element with no offsets. Even though the technique is quite simplistic, it produces impressive results. If you’re still not fully convinced, be sure to check the following snapshot, which hopefully will be illustrative: 


As this (and the other) example shows, the “text-shadow” property can be a powerful, hard-to-beat tool, which not only will let you add simple shadows to your web page elements, but decorate them with eye-catching effects that usually were created with a bunch of background images.

Now that you’re aware of the actual capabilities that the property posesses, make sure to take advantage of them in the development of your next web project.   

Final Thoughts

In the course of this two-part tutorial, I went through the development of a few approachable examples, which showed you how easy it is to add some appealing text effects to elements of a web page, thanks to the functionality offered by the “text-shadow” CSS3 property.

The fact that the property allows you to assign multiple shadows in one single declaration opens up a door for being even more creative and implement different effects, other than the ones illustrated just a moment ago.

See you in the next web design tutorial!


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


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials