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!


Leave a Comment

Your email address will not be published. Required fields are marked *

14 − 3 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>