13Sept
2009
2009
Make Cool Text Effects With CSS Text Shadow
The third generation CSS has a property called 'text-shadow' that makes shadow to appear on each letter.Text-shadow was first introduced in CSS level 2, but was abandoned as no browser implemented it. The simple form of text-shadow property looks as follows:
h3 {text-shadow: 5px 5px 10px #333333;
which adds 10px dark grey shadow--5px to the right and 5 px down relative to the normal text.
Generally speaking, the property values are as follows:
1. offset-x : horizontal position, positive value and shadow to the right
2. offset-y : vertical position, positive value and shadow to the bottom
3. blur-radius : makes text looks fuzzy or blur. The amount of fuzziness depends on the offset value. Higher value gives more blur.
4. Color code : that gives the type of color for the shadow
Now, lets look at some of text shadow
Demo 1
Cool Text Effects With CSS3
The CSS and HTML codes are as follows:
<html>
<head>
<style type='text/css'>
#text1 {
background-color:#ffffff;
text-shadow: 2px 2px 3px #888;
font-family: "Liberation Sans Bold", Arial, sans-serif;
color:#000;font-size: 20px;
}
</style>
<body>
<h3 id="text1">Cool Text Effect With CSS3</h3>
</body>
</html>
With the above css code we get black text on white background with smooth grey shadow. We can also ignore the blur radius by setting the third numeric value to "0" or just delete it. Below is demo 2 with blur radius being deleted.
Demo 2
Cool Text Effects With CSS3
<style type='text/css'>
#text2 {
background-color:#ffffff;
text-shadow: 2px 2px #888;
font-family: "Liberation Sans Bold", Arial, sans-serif;
color:#000;font-size: 20px;
}
</style>
Demo 3
Cool Text Effects With CSS3
<style type='text/css'>
#text3 {
background-color:#ffffff;
text-shadow: 2px -2px 3px #888;
font-family: "Liberation Sans Bold", Arial, sans-serif;
color:#000;font-size: 20px;
}
</style>
Demo 4
Cool Text Effects With CSS3
<style type='text/css'>
#text4 {
background-color:#ffffff;
text-shadow: 2px -2px 3px #ff3300;
font-family: "Liberation Sans Bold", Arial, sans-serif;
color:#33cc33;font-size: 20px;
}
</style>
Demo 5
Engraved Text Effects With CSS3
<style type='text/css'>
#text5 {
background-color:#666;
text-shadow: 0px 1px 1px #fff;
font-family: "Liberation Sans Bold", Arial, sans-serif;
color:#000;font-size: 20px;
}
</style>
Demo 6
Engraved Text Effects With CSS3
<style type='text/css'>
#text6 {
background-color:#000;
text-shadow: 0px 1px 1px #ccc;
font-family: "Liberation Sans Bold", Arial, sans-serif;
color:#666;font-size: 20px;
}
</style>
Demo 7
Engraved Text Effects With CSS3
<style type='text/css'>
#text7 {
background-color:#666;
text-shadow: 0px 1px 1px #000;
font-family: "Liberation Sans Bold", Arial, sans-serif;
color:#fff;font-size: 20px;
}
</style>
Demo 8
Glowing Effects With CSS3
<style type='text/css'>
#text8 {
background-color:#000;
text-shadow: 1px 1px 6px #fff;
font-family: "Liberation Sans Bold", Arial, sans-serif;
color:#fff;font-size: 20px;
}
</style>
Demo 9
Glowing Effects With CSS3
<style type='text/css'>
#text9 {
background-color:#666;
text-shadow: 0px 0px 3px #fff;
font-family: "Liberation Sans Bold", Arial, sans-serif;
color:#fff;font-size: 20px;
}
</style>
Demo 10
This is an example of letter press effects of CSS3
HELLO CSS3 WORLD
<style type='text/css'>
#text10 {
background-color:gold;
text-shadow: 0px 1px 2px #111;
font-family: "Liberation Sans Bold", Arial, sans-serif;
color:#f5f5f5;font-size: 20px;
}
</style>
Subscribe to my feed