Adrian World Design
  • Services
    • Website Consulting
    • Startup Consulting
    • Zend Development
  • Portfolio
    • My Framework
  • Knowledge
    • Web Standards
    • PHP bare-bones
    • Zend Framework
    • Zend Framework 2
    • Git - Github
    • Search Engine Optimization
    • Web Hosting
    • Linux
    • Microsoft Windows
    • Web Browsers
    • Mobile Devices
  • About
    • Business
    • Professionally
    • Personally
  • Contact
    • Contact Form
    • Phone
    • Email
    • Messaging

Knowledge Base Overview

Text Shadows

Knowledge ⇒ Web Standards ⇒ Cascading Style Sheets ⇒ Text Shadows
Tweet
Share on Tumblr

Created: Jun 24, 2011, 11:59:21 AM CDTLast updated: Jun 24, 2011, 11:59:21 AM CDT

Basic functions

Warning: If you use Internet Explorer (up to and with IE8) this will not work because it is not supported!

The basic function for text-shadow is very simple and adds a shadow to your text as expected, i.e. the letters of your selected font. No surprise here really. You provide three values for the shape of the shadow and a fourth value for the color. The examples below are separated to demonstrate the three values for the shape.

First is the h-shadow value, horizontal position of the shadow

text-shadow: 5px 0px 0px #f00; Horizontal Shadow

The same but with a minus value, moving the shadow to the left

text-shadow: -5px 0px 0px #f00;  Horizontal Shadow

Second is the v-shadow value, vertical position of the shadow

text-shadow: 0px 5px 0px #f00; Vertical Shadow

The same but with a minus value, moving the shadow above the text

text-shadow: 0px -5px 0px #f00; Vertical Shadow

Third is the blur value, without a blur the text is basically just duplicated in the background as you can see in the examples above

text-shadow: 0px 0px 5px #f00;  Blur Shadow

Fourth is the color value and the example has all values combined

text-shadow: 1px 1px 2px #a55;  Text with shadow

text-shadow: -1px -1px 2px #a55;  Text with shadow

As you can see in the fourth example you will get a different results with negative values for the offsets. Depending on the font, letter and font-size you may increase the values but in many cases it will require some fine tuning to find the best effect.

Extending the effects

Now, if you just stick to this basic function of the text-shadow you are missing out. The fun part begins because you can add more than just one statement to the property and they will complement each other. You can add some stunning effects to your letters and fonts.

3D Effect

We can create a 3D effect very easily with offset on a couple hard shadows. Notice also the change in the color from dark to light.

Stack three hard shadows

text-shadow: 1px 1px 0px #aaa, 2px 2px 0px #bbb, 3px 3px 0px #ccc;
Cool 3D Effect

Consider adding some space to shadows but especially with 3D effects.

letter-spacing: 1px;
text-shadow: 1px 1px 0px #aaa, 2px 2px 0px #bbb, 3px 3px 0px #ccc;

Cool 3D Effects

Especially for large letters you will want a smoother transition. Simply stack the shadows with a soft blur instead of adding more shadows.

letter-spacing: 1px;
text-shadow: 2px 2px 0px #aaa, 4px 4px 0px #bbb, 5px 5px 0px #ccc;

Hard 3D Effect

letter-spacing: 1px;
text-shadow: 2px 2px 1px #aaa, 4px 4px 1px #bbb, 5px 5px 1px #ccc;

Soft 3D Effect

Glow Effect

Do you like to add some glow to the letters? Simple, stack different sizes and colors, it makes a letter and text glow. We don't need any offsets just a narrow blur with a contrasting color. This will add the glow around the letter. Next, depending on your background you will have to add a second wider blur behind the glow in yet another contrasting color. This will finally make the glow stand out. Note that the order in which you apply the settings is crucial.

letter-spacing: 1px;
text-shadow: text-shadow: 0px 0px 1px yellow, 0px 0px 4px #444;

Let it glow

Neon Effect

How about some neon effect. Keep playing with the glow effect. First we have to make the font's color brighter. Then we add some hard shadows around all four sides with a similar, although, darker color. Finally a larger blur around everything with a similar and bright color and you will have your nice neon effect. Neon effects require some space; don't forget to add some.

letter-spacing: 5px;
color: #fdd;

text-shadow: 1px 1px 0px #f00, -1px -1px 0px #f00, 1px 1px 8px #eaa;

Some Neon Effect

Emboss Effect

By now you should get the hang of it and your imagination going. By adding some contrasting shadows around all four sides and a soft blur you will get a nice emboss effect.

letter-spacing: 5px;
background-color: #aab;
color: #677;

text-shadow: 1px 1px 1px #eef,-1px 0px 1px #001, 0px -1px 1px #001, -1px -1px 1px #001;

Emboss This

Deboss Effect

Of course, we can make the opposite effect of emboss; simply swap the colors and we have a relief or deboss effect.

letter-spacing: 5px;
background-color: #aab;
color: #677;
text-shadow: 1px 1px 1px #eef,-1px 0px 1px #001, 0px -1px 1px #001, -1px -1px 1px #001;

Deboss That

Number of Shadows

Looking at the emboss effect note that there are subtle but sometimes noticeable differences, especially when you work with larger letters. Pay attention to the little changes in the number of shadow statements. Especially around the four axis and with that the corners. In the example to the right, a simple -3px -3px offset alone does not produce smooth transitions around the corners, you will have to add -3px 0px and 0px -3px as well for a smooth transition to the bottom left and to the top right.

letter-spacing: 5px; background-color: #aab; color: #677; font-size: 4em;

CSS for 1. Order:
text-shadow: -3px -3px 4px #001, -3px 0px 4px #001, 0px -3px 4px #001, 3px 3px 4px #eef;

CSS for 2. Order:
text-shadow: 3px 3px 4px #eef, -3px -3px 4px #001;

SE vs. SE

Order of Shadows

Another thing you will have to take care of is the order of the statements; the statements are cascading. Again, the differences are subtle but sometimes noticeable and mostly around the corners.

letter-spacing: 5px; background-color: #aab; color: #677; font-size: 4em;

CSS for 1. Order:
text-shadow: -3px 0px 4px #001, 0px -3px 4px #001, -3px -3px 4px #001, 3px 3px 4px #eef;

CSS for 2. Order:
text-shadow: 3px 3px 4px #eef, -3px 0px 4px #001, 0px -3px 4px #001, -3px -3px 4px #001;

SE vs. SE

Other Effects

From here on you can really go over board and make all kinds of effects. Stack shadows like crazy, work with colors and the axis. Just make sure you use them on rather large letters and give some room to breath.

There is a different result with every colors, shadow or change of axis. Below is just one example.

Again, if you don't see anything special you are probably looking at it with an older browser, like Internet Explorer Version 8 or less.

font-size: 6em;
color: #aae;
letter-spacing: 5px;
text-shadow:
3px 0px 0px #aaa, 0px 3px 0px #aaa, 3px 3px 0px #aaa,
-3px 0px 0px #222, 0px -3px 0px #222, -3px -3px 0px #222,
1px 1px 16px #000, -1px -1px 16px #135;

Crazy Effects

font-size: 4em;
color: #eef;
letter-spacing: 5px;
text-shadow:
Line 1: -1px -1px 0px #f33
Line 2: 1px 1px 0px #33f
Line 3: 1px 1px 0px #f3f, 1px 1px 5px #3d3, 3px 3px 3px #5f5

Check This Out!
How about this?
Hope you liked it.

blog comments powered by Disqus
Prev
Next

Powered by FeedBurner Load our "Knowledge Base" feed in your RSS feeder

Follow us on Twitter
Follow us on Facebook
Follow us on LinkedIn
Follow us on Google+

All rights reserved, Adrian World Design ©2009–2021 Powered by Wejas Framework

Jump to Top