PHP FUNCTION DISCUSSION BLOG: September 2016

Wednesday, September 14, 2016

css emboss and 3D effect for text

Here is CSS class to give 3D and emboss effect to your fonts

CSS

<style>
.embossclass{
font-size:80px ;
font-weight:normal;
font-family:Verdana, Geneva, sans-serif ;
z-index: 9999;
color: #fff;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #53b1e4, 0 0 30px #000, 0 0 40px #000, 0 0 50px #000, 0 0 75px #000;
letter-spacing: 15px;
}
.threedclass{
font-size:80px ;
font-weight:normal;
font-family:Verdana, Geneva, sans-serif ;
z-index: 9999;
color: #fff;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
letter-spacing: 10px;
}

.thr2dclass{
font-size:80px ;
font-weight:normal;
font-family:Verdana, Geneva, sans-serif ;
z-index: 9999;
color: #fff;
text-shadow: 3px 3px 0px #666, 5px 5px 0px #666;
letter-spacing: 10px;
}
</style>

HTML

<body bgcolor="#ddd">
 
 
 
 
 




<center><label class="embossclass" >My emboss Text </label></center>
<center><label class="threedclass" >My 3D Text </label></center>
<center><label class="thr2dclass" >My sec 3D Text </label></center>
</body>

OUTPUT