Shadows

The basic idea is to make a copy of the text to which we want to add a shadow. Example 2 opposite has a <span> around the first copy. It is given a gray color to resemble a shadow.

The next step is to make this first copy a block element, using a CSS white-space: nowrap; declaration to prevent wrapping. The second copy of the text will then drop below the first. We can pull it back up and over the "shadow" using margins. The code looks like this:

HTML

  1. <h3><span>In Shadow</span>In Shadow</h3>

CSS

  1. h3 {
  2. line-height: 1.0;
  3. white-space: nowrap;
  4. }
  5. h3 span {
  6. display: block;
  7. margin: 0 0 -1.1em 0.1em;
  8. color: #ccc;
  9. }

All well and good, but the extra text makes the content nonsense. What we shall do is use the :before pseudo element to generate the duplicate text. Without CSS there is no duplication. Problem solved!

HTML

  1. <h3>In Shadow</h3>

CSS

  1. h3 {
  2. line-height: 1.0;
  3. white-space: nowrap;
  4. }
  5. h3:before {
  6. content: "In Shadow";
  7. display: block;
  8. margin: 0 0 -1.1em 0.1em;
  9. color: #ccc;
  10. }

Not so fast! Internet Explorer cannot generate content like this. However, that browser has its own, proprietary way of generating text shadows. Since other browsers do not understand this, the two methods can be combined, as in the heading to this column. Example 6 has this CSS applied -

  1. h3 {
  2. height: 1em;
  3. filter: Shadow(Color=#cccccc, Direction=135, Strength=5);
  4. }

The basic idea can be varied. In example 7, the "shadow" is italic.

The final two examples use both :before and :after pseudo elements for some interesting effects. This is the code for example 9:

  1. h3 { /* inner shadow */
  2. line-height: 1.0;
  3. white-space: nowrap;
  4. color: #666;
  5. }
  6. h3:before,
  7. h3:after {
  8. content: "In Shadow";
  9. display: block;
  10. }
  11. h3:before { /* outer shadow */
  12. color: #ccc;
  13. margin: 0 0 -1.05em 0.05em;
  14. }
  15. h3:after {
  16. color: #000; /* text color */
  17. margin: -1.05em 0 0 -0.05em;
  18. }

Finally, we note that recent versions of Safari implement the CSS2 text-shadow property. However, text-shadow has been removed from the CSS 2.1 draft standard, as well as the CSS 3 proposal! Go figure.