Tutorial of creating beautiful Text Shadow Using Css


The text-shadow property is super easy to work with and works well across all modern browsers without even so much as a vendor prefix!  But it doesn’t support on the older version IE. Here i am showing you how to create the basic text shadow.

Text  Shadow Support in Cross Browser

Syntax:

The syntax for creating a simple text-shadow is shown below.

text-shadow: horizontal-offset vertical-offset blur color;

Here’s the result of this code, this display the simple text shadow

text-shadow:  2px 4px 3px #fcfcfc;
-webkit-text-shadow:  2px 4px 3px #fcfcfc;
-khtml-text-shadow:  2px 4px 3px #fcfcfc;
-moz-text-shadow:  2px 4px 3px #fcfcfc;

You can find the  full code example with the output of this code below.
 

shadowtext

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style>

.title
{

width:200px;
margin:auto;
height:200px;
vertical-align:middle;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#FFFFFF;
text-align:center;
text-shadow: 2px 4px 3px #fcfcfc;
-webkit-text-shadow:2px 4px 3px #fcfcfc;
-khtml-text-shadow:2px 4px 3px #fcfcfc;
-moz-text-shadow:2px 4px 3px #fcfcfc;

}

</style>
</head>

<body style=”background-color:#333333″>

<div class=”title” >
Shadow Text Here
</div>
</body>
</html>

In above example the .title is a class and we have given the text-shadow as defined in html. We have provided the #fcfcfc is color of the shadow.

See related articles:

Dynamic CSS Rounded Corners Buttons
Beautiful Text Shadow Using Css
Customize Textarea Control Resizing of Html with CSS
List of CSS Generator Tools



Kalpesh Patel

Founder Of Nexus Software Group Leading IT solution and service provider and offering a full range of application development and I.T. consultancy services. Nexus Software Group Contributors In: post free ads online in India and post free ads online in USA