This tutorial explains how to create a text with shadow using CSS.

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

HTML code:

<html >
<head>

<link href=”stylesheet.css” rel=”stylesheet” type=”text/css” media=”screen” />

</head>

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

</body>
</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!


This article has 4 comments

  1. Pingback: Tweets that mention how to create text with shadow using css | Developer Code book -- Topsy.com

Leave a Comment

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

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>