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

  • 3D Text

    @mansi.gupta
    Recommendations Offline Message

    • 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!

    css3 html
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

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