Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • 3D Text

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 555
    Comment on it

    Hello Readers!

    We all know about the text-shadow property. It provides a shadow and a blurring effect to the text. The CSS3 text shadow can also be used to create 3D text. Just use multiple text shadows on any HTML element to create a 3D effect.

    In this example too, the depth is obtained with multiple text-shadows. Each has been given a zero blur and is also incremented increasingly offset from the main text.

     

    The following code will work in the latest versions of Safari, Chrome, Firefox, and Opera.

    HTML :

    1. <div class="wrapper">
    2. <p>3D TEXT</p>
    3. </div>
    4.  

    CSS :

    1. .wrapper p{
    2. font:normal 60pt Arial;
    3. font-size:30px;
    4. color:#FFFFFF;
    5. text-shadow: 0 1px 0 #ccc,
    6. 0 2px 0 #c9c9c9,
    7. 0 3px 0 #bbb,
    8. 0 4px 0 #b9b9b9,
    9. 0 5px 0 #aaa,
    10. 0 6px 1px rgba(0,0,0,.1),
    11. 0 0 5px rgba(0,0,0,.1),
    12. 0 1px 3px rgba(0,0,0,.3),
    13. 0 3px 5px rgba(0,0,0,.2),
    14. 0 5px 10px rgba(0,0,0,.25),
    15. 0 10px 10px rgba(0,0,0,.2),
    16. 0 20px 20px rgba(0,0,0,.15);
    17. }

    That was all. Try yourself too. And keep coding!

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: