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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 212
    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 :

    <div class="wrapper">
     <p>3D TEXT</p>
    </div>
    

    CSS :

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

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

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: