Text with shadow using css

Create Content Management System with Dreamweaver CS4, PHP, MySQL and FCK Editor. This series of the tutorials will guide you through the process of developing your very own Content Management System using well known tools and technologies such as: Dreamweaver CS4, PHP, MySQL and FCK Editor.

Go back

CSS tutorials

Text with shadow using CSS
Text with shadow using CSS

This tutorial explains how to create a text with shadow using CSS.
It has been tested and works with the following browsers:

Firefox 2.0.0.4 +
Internet Explorer 6.0 +
Mozilla 1.7.13 +
Opera 9.21 +
Netscape 8.0.4 +

You can see it in action here: Demo.

First let's create a structure of our text container together with a text.

<div id="wrapper">
<span class="firstlayer">Text with shadow using CSS</span>
<span class="secondlayer">Text with shadow using CSS</span>
</div>

Now we are going to apply some formatting using CSS.
We are applying a position: relative; to the text container (#wrapper). This way all other elements within #wrapper which are using absolute positioning will be positioned relatively to the #wrapper not the body tag.
Then firstlayer and secondlayer get their absolute positions with secondlayer being 2px lower and to the right.
At the end we need to apply z-index to indicate which layer should be on top of the other.

html, body {
margin: 0px;
padding: 0px;
}
body {
background-color: #DDDFD7;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
text-align: center;
}
#wrapper {
width: 700px;
height: 200px;
margin: 20px auto 20px auto;
padding: 0px;
text-align: left;
position: relative;
border: solid 1px #fff;
}
.firstlayer {
font-size: 18px;
font-weight: bold;
color: #fff;
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
}
.secondlayer {
font-size: 18px;
font-weight: bold;
color: #aaa;
position: absolute;
top: 22px;
left: 22px;
z-index: 0;
}

And that's it - any questions or suggestions - get in touch.

Total tutorials: 0

Subtotal: £0.00

View basket