CSS: 3d text!
Can you see anything special in the following text?
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:
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!