how to create text with shadow using css

This tutorial we explains, how to create a text with shadow using CSS. We given the code sample with there full details.

how to create text with shadow using css

how to create text with shadow using css
how to create text with shadow using css

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

HTML code:

[/html]

<html >
<head>

css” rel=”stylesheet” type=”text/css” media=”screen” />

</head>

<body>
<div id=”wrapper”>
<span> wordpressAPI.com</span>
<span> wordpressAPI.com</span>
</div>

</body>
</html>

[/html]

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Now we are going to apply CSS code.

CSS code:


* {
margin: 0px;
padding: 0px;
}
body {
background-color:#9BCDFF;
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: 30px;
font-weight: bold;
color: #fff;
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
}
.secondlayer {
font-size: 30px;
font-weight: bold;
color:#666666;
position: absolute;
top: 22px;
left: 22px;
z-index: 0;
}

~~~~~~~~~~

Thank you!