Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • 3-D effect by box-shadow property in css

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 460
    Comment on it

    The shadow behind a box gives an amazing 3-D effect. We can apply this 3-D effect by box shadow property.

    The Syntax is :

    box-shadow : [horizontal-positioning-value] [vertical-positioning-value] [blur-radius] [optional disperse-radius ] [color];

    1. horizontal-positioning-value: (mandatory) tells the horizontal positioning. the positive values gives the right shift and negative value gives the left shift to the shadow.
    2. vertical-positioning-value: (mandatory)tells the horizontal positioning. the positive values gives the top shift and negative value gives the left shift to the shadow.
    3. blur-radius: the shadow will become more blur with increasing blur-radius pixels. blur-radius 0px will give a sharp shadow.
    4. disperse-radius(optional): the default value of this field is 0px. the positive value will increase the size of shadow.
    5. color: it is the color of shadow and takes name, hexdecimal code , rgba() as its value.

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div {
        width: 400px;
        height:200px;
        background-color: pink;
        box-shadow: 10px 10px 5px #75D1FF;
    }
    </style>
    </head>
    <body>
    
    <div></div>
    
    </body>
    </html>
    

 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: