A shadow or a contour on text with CSS

Create CSS text effects such as shadows is very simple.

First solution: two texts one over the other.

Since the text-shadow, CSS2 property doesn't appear yet on browsers, the shadow must be created from scratch with a text in red and a gray text that will appear behind the red one and slightly off centered by a few pixels.(View result here)

Important: this technique is just a trick that may cause some problems on older browsers or for users who have not activated the CSS styles, or with users with text or braille browsers. In these cases, the HTML structure will appear in its gross version and all the shadowed texts will appear twice, one beside the other.
To avoid this problem, see the second method.

The principle is to first write the shadow text using gray, than the normal text with red: the red text must appear on top of the gray, so it must be after the gray text in the (X)HTML code.

We will define a h1 tag in gray -our shadow text will be a title- and a neutral SPAN tag in red. The latter tag will be slightly offcenter from the first one.

So the the tags overlap, one of them must be positionned in "absolute". An absolute position is set outside of the flux and is positionned according to a positionned container, so you have to also place the H1 tag (the one that contains the SPAN tag) with a relative or absolute position.

Here si the CSS part (Note: Texts that are between /* and */ are comments and can be removed): 

<style type="text/css">
<!--

h1, span {
font: bold 25px verdana, sans-serif;
}
h1 {
position: relative; /* container H1 is positionned to place the SPAN in it */
color: gray;
}
h1 span {
position: absolute; /* SPAN is overlaping on the title */
top: -2px; /* SPAN is offcentered */
left: -2px;
color: red;
}

-->
</style>

To finish, the html code will only place both tags (shadow and offcentered normal text on top):

<body>
<h1>Titre ombré<span> Shadow </span></h1>
</body>

VARIATION: it is also possible to use this technique to create a contour effect around text (view result)

Second solution: CSS generated content

CSS allows you to generate dynamic content thanks to the Content property. Be careful with using this technique, since the generated content will not appear on browsers without activated CSS styles.

However, in our case, this is a good thing. If CSS are activated, the shadow will appear, if not the shadow will be ignored without compromising the navigation of the document.

The principle will be to add a :after pseudo-class on our principal titles h1, which will be associated with a content property that will show the content of the title attribute.

To recap, the shadow will be the title and content will generate the content that will be above the shadow and that will be the content of the title attribute : be careful that it is exactly the same as the title content.

Important: Note that for now all versions of Internet Explorer does not recognize the :after pseudo-class. With this browser, only the title (that is the shadow) will show. Be careful not to give it a color that is too similar to your background color.

If you want to get a visual effect on Internet explorer, you will need to use Dean Edwards's hack "IE7".

<style type="text/css">
<!--

h1 {
font: bold 25px/25px verdana, sans-serif;
color: gray;
}

h1:after {
display: block;
margin-left: -2px;
margin-top: -26px;
color: red;
content: attr(title);
}

-->
</style>

Here is the HTML part:

<h1 title="Big title">Big title</h1>

Here is the result

Print article

Raphael GOETTER
www.alsacreations.com