This segment on CSS3 will review creating text-shadows and 3D text, utilizing color, font-size, font-family, and the text-shadow styling property element in multiple layers to create impressive typographical designs for your websites. With the text-shadow property and additional layers creating 3D text, you can now just about eliminate the need for elaborate Photoshop or graphic designs for text, fonts, and typography. The text-shadow element has been around since CSS2, but its use in creating 3D text is a relatively recent event.

Text shadowing

The text-shadow property is part of the text module for CSS3 and is a W3C Candidate Recommendation, applying to all elements and generated content. The syntax for the text-shadow in its simplest structure is written in the form:

text-shadow: Xpx Ypx Lpx #xxxxxx;

Where:

  • Xpx = x-axis, horizontal distance shadow offset
  • Yxp = y-axis, vertical distance shadow offset
  • Lpx = Length of cast, feathering, blur radius
  • #xxxxxx = color

According to the W3C specification the text-shadow property accepts a comma-separated list of shadow effects to be applied to the text of the element. The shadow effects are applied in the order specified and may thus overlay each other, but they will never overlay the text itself. Shadow effects do not alter the size of a box, but may extend beyond its boundaries. The stack level of the shadow effects is the same as for the element itself.

The specification continues to define that each shadow effect must specify a shadow offset and may optionally specify a blur radius and a shadow color. A blur radius may be specified after the shadow offset. The blur radius is a length value that indicates the boundaries of the blur effect. The exact algorithm for computing the blur effect is not specified. If no blur radius is specified, the treatment is as if a blur radius of zero was specified and the shadow has the same size and shape as the glyphs that cast it. User agents may only implement only part of this property by ignoring blur effects.

The specification states that a color term may be specified before or after the length terms of the shadow effect. The color term will be used as the basis for the shadow effect. If no color is specified, the value of the color property will be used instead.

In the example below I am setting the horizontal and vertical shadow offsets to 4px, the blur effect to 6px, and the shadow color to #336633, along with a font-size of 5.0em, and a font color set to #333399 for styling a level 1 heading:

h1 {
      text-shadow: 4px 4px 6px #336633;
      font-size: 5.0em;
      color: #333399;
}

The example HTML:

<h1>CSS3 Text Shadow!</h1>

Figure A shows the result as displayed in Firefox 7.0:

Figure A

In the next example, I am going to demonstrate adding more styling elements using four multiple text-shadow effects with the comma separated list to apply to the total effect:

  • First, a 4px white blur, then a -5px vertical offset with a 4px blur using the color #ff3
  • A 2px horizontal and -10px vertical offset with a 6px blur using the color #fd3
  • A -2px horizontal and -15px vertical offset with an 11px blur using the color #f80
  • A 2px horizontal and -25px vertical offset with an 18px blur using the color #f20 for the level 2 heading:
h2 {
      text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
            -2px -15px 11px #f80, 2px -25px 18px #f20;
      font-size: 3.0em;
      color: #FFF;
      text-align: center;
      padding: 25px;
      background: #333333;
      width:745px;
}

With the example HTML:

<h2>CSS3 Multiple Text Shadow Effects!</h2>

Figure B shows the result as displayed in Firefox 8.0:

Figure B

CSS3 3D Text

To create 3D text, we will utilize multiple layers of the text-shadow property with a comma separated list of colors and rgba colors with varying vertical offset and blur, and also include a font-size and font-family. Creating a text-shadow stack of multiple shadow effects adds up to generating the overall 3D effect. We start with five colors defined with successive layers of vertical spread only, add one layer with both vertical spread and blur starting out the rgba() colors, add in a thin layer of rgba() color blur only, and then finish with five more layers of vertical spread and blur defined for the remaining rgba() colors as displayed in the example below.

h3 {
      font-size:6.0em;
      font-family: Corbel;
      color: #666666;
      text-shadow: 0 1px 0 #ccc,
                0 2px 0 #c9c9c9,
                0 3px 0 #bbb,
                0 4px 0 #b9b9b9,
                0 5px 0 #aaa,
                0 6px 1px rgba(0,0,0,.1),
                0 0 5px rgba(0,0,0,.1),
                0 1px 3px rgba(0,0,0,.3),
                0 1px 3px rgba(0,0,0,.2),
                0 5px 10px rgba(0,0,0,.25),
                0 10px 10px rgba(0,0,0,.2),
                      0 20px 20px rgba(0,0,0,.15);
}

With the following HTML:

<h3>3D Shadow Effect</h3>

Figure C shows the result as displayed in Firefox 7.0:

Figure C

Now, let’s add an on hover effect to the third level heading text-shadow effects by moving the text up and to the left by 5 pixels.

h3:hover {
   position: relative;
   top: -5px;
   left: -5px;
   text-shadow:   0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 1px 3px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

Transform and transform-origin

Stu Nicholls is taking the CSS3 text-shadow styling effects to another level; he has an exceptional demonstration of 3D text and the use of text-shadow on his CSS Play web site at CSS3 – Solid text with shadow (best viewed in Firefox, Safari, and Chrome). Stu is making use of CSS transform and transform-origin to skew the text along with multiple text shadows and a before pseudo-class to apply the styling effects as displayed in this screen shot image below (Figure D):

Figure D

All of the text-shadow effects in this CSS3 segment are demonstrated here. (This zip file contains the files CSS3_Text-Shadow.html and CSS3_Examples.css. Download to a folder on your desktop to view example.)

Future segments featuring CSS3 will highlight more elements in the Text Module, including text-overflow, word-wrap, text decoration, and more on scaling with the transform effect, transitions, and other topics.

Also: