Text Shadows

Posted by RobElliott on 01 Jul 2009 10:17, last edited by James Kanjo on 09 May 2010 06:04

Tags: css shadows text

rating: +6+x

The release of Firefox 3.5 has provided easier functionality to create text with shadows.

What we are trying to achieve

This is an example of a simple text shadow

This is an example of a harder edge text shadow

This is an example of a fuzzy blur

This is an example of multiple shadows

CSS

In the same way as with http://community.wikidot.com/howto:boxes-with-shadows you can create a class in your custom CSS giving the width, color and other properties for the text. For example, the black box above has a class called .shbox-black with the following properties and values. In this example we haven't added the text shadow property as we will add that into the page inside a div.

.shbox-black {
    background: #000000;
    border: 1px solid #000000;
    text-align: center;
    color: #ffffff;
    width: 40%;
    margin-left: 5%;
    -moz-border-radius:25px;
     font-size: 1.5em;
}

Syntax

Unlike with the -moz-border-radius, you don't use -moz before the text shadow. It just gets entered as text-shadow then the values, for example text-shadow: 2px 2px 3px #000;

Values

  • The first value is the horizontal offset. You must set this value.
  • The second value is the vertical offset. You must set this value.
  • The third value is the blur radius. This value is optional.
  • You then set the colour for the shadow.

Adding a Div to your page

But you don't have to enter a custom class. You can just add the text shadow property into a div in your page as shown below:

Simple text shadow

[[div style="text-shadow: 2px 2px 3px #dddddd;"]]
This is an example of a simple text shadow
[[/div]]

This is an example of a simple text shadow

hard edges - remove the blur:

[[div style="text-shadow: 2px 2px 0 #888;"]]
This is an example of a harder edge text shadow
[[/div]]

This is an example of a harder edge text shadow

Fuzzy blur:

[[div style="text-shadow: 0px 0px 5px #000;"]]
This is an example of a fuzzy blur
[[/div]]

This is an example of a fuzzy blur

Multiple text shadows:

This example uses the .shbox-black class as well as specifying the shadow parameters:

[[div class="shbox-black" style="text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;"]]
This is an example of multiple text shadows
[[/div]]

This is an example of multiple shadows

Browser Suppport

  • Firefox requires version 3.5+
  • Opera requires version 9.5+
  • Safari requires version 1.1+
  • This is supported by Chrome
  • Internet Explorer doesn't support the text-shadow property but degrades nicely and just gives the normal text.

Author

RobElliottRobElliott. Please visit his/her userPage.

Rate this solution

If you think this solution is useful, please increase the rating.

rating: +6+x

Add a New Comment

Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.