CSS3 implement 3D font with shadow effect

This article mainly introduces about the CSS3 to achieve 3D font with shadow effect, has a certain reference value, now share to everyone, the need for friends can refer to

3D font and also have a shadow, this effect presumably everyone only think that some advanced drawing tools can be realized, css3 the appearance of all this seemingly impossible to achieve possible, next for you to introduce the 3D font with shadow effect of the implementation steps, interested you can not miss the HA

As follows:

The source code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
STYLE.CSS:

body{background: #d5d5d5;} #wrapper {width:960px; min-height:500px; padding:50px 10px 0 10px; margin:0 Auto; text-align:c Enter } #wrapper h1{font:normal 60pt Arial; color: #FFFFFF; text-shadow:0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b  9B9B9, 0 5px 0 #aaa, 0 6px 1px rgba (0,0,0,.1), 0 0 5px Rgba (0,0,0,.1), 0 1px 3px Rgba (0,0,0,.3), 0 3px 5px Rgba (0,0,0,.2), 0 5px 10px Rgba (0,0,0,.25), 0 10px 10px rgba (0,0,0,.2), 0 20px 20px Rgba (0,0,0,.15); } #wrapper p{font:normal 40pt Arial; color: #FFFFFF; text-shadow:0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9 B9B9, 0 5px 0 #aaa, 0 6px 1px rgba (0,0,0,.1), 0 0 5px Rgba (0,0,0,.1), 0 1px 3px Rgba (0,0,0,.3), 0 3px 5px Rgba (0,0,0,.2), 0 5px 10px Rgba (0,0,0,.25), 0 10px 10px rgba (0,0,0,.2), 0 20px 20px Rgba (0,0,0,.15); }
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!