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">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p></p>
<p></p>
<p></p>
<p></p>
<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




No comments:

Post a Comment