CSS: 3d text!

Tweet

Can you see anything special in the following text?

3D Text

If you see it just as a big text, your browser is not compatible. Try to use the latest version of Firefox, Chrome, Safari, Opera or IE10.
How can it be achieved?

Let me explain it to you.


A secret revealed
It uses CSS text-shadow rule. And there's an online tool that helps us creating the effect. What we basically need is just a container (for example a div) with the text in it. We then assign a specific class to the div and apply some rules. For the above text, the CSS is:

.Three-Dee{
  font-family: Garamond, serif;
  line-height: 1em;
  color: #1808fa;
  font-weight:bold;
  font-size: 112px;
  text-shadow:0px 0px 0 rgb(-2,-18,224),1px 1px 0 rgb(-9,-25,217),2px 2px 0 rgb(-16,-32,210),3px 3px 0 rgb(-23,-39,203),4px 4px 0 rgb(-30,-46,196),5px 5px 0 rgb(-38,-54,188),6px 6px 0 rgb(-45,-61,181),7px 7px 0 rgb(-52,-68,174),8px 8px 0 rgb(-59,-75,167),9px 9px 0 rgb(-66,-82,160),10px 10px 0 rgb(-73,-89,153), 11px 11px 0 rgb(-80,-96,146),12px 12px 11px rgba(0,0,0,0.2),12px 12px 1px rgba(0,0,0,0.5),0px 0px 11px rgba(0,0,0,.2);}

Just go to 3D CSS Text and start creating your own 3D text!