Fire

In the following example, the text looks like if it is burning. The CSS text-shadow property allows you to create this effect. The point is to use 4 different text-shadow colors―yellow, red, orange and brown―with different vertical and blur values. The text itself has white color.

CSS&HTML Code

<html>
<head>
<title>Burning Text With CSS</title>
<style>

#Fire
{
left:50px;
position:absolute;
padding:30px;
font-size:300%;
color:white;
text-shadow: 
0px -1px 10px yellow,
0px -2px 20px yellow,
0px -3px 8px yellow,
0px -15px 25px yellow,
0px -4px 8px red,
0px -5px 5px red,
0px -6px 18px red,
0px -13px 30px red,
0px -7px 14px orange,
0px -8px 10px orange,
0px -9px 8px orange,
0px -20px 15px orange,
0px -10px 2px brown,
0px -11px 2px brown;
}

</style>

</head>

<body>


<div id="Fire">
<h1 style="text-align:center">
Fire</h1>
</div>
</body>
</html>

Tiger Bird Webdesign

Tuesday, 11 November 2014

The Text Is Burning! CSS Effects

Fire

CSS&HTML Code

No comments:

Post a Comment