Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Using shadow property to text and box in CSS3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 340
    Comment on it

    Css3 has added a new feature shadow to give shadow of elements. It supports two types of shadow:

    • Text Shadow
    • Box Shadow

    Text Shadow:
    You can use text shadow property to give text shadow effect. text-shadow property is used to give shadow effects to text elements. following are the examples:

    h1{
    text-shadow: 2px 2px;    
    }


    there are horizontal shadow and vertical shadow mentioned above.

    h1 {
        text-shadow: 2px 2px 5px red;
    }


    You can add blur effect and color to text shadow in the third and fourth parameter. You can also add more than one shadow effect to a text element by using comma between two shadows like this:
     

    h1 {
        text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
    }

    You can see the demo of text shadow here.

    Box Shadow:
    box-shadow property is used to give shadow effect to box elements like a container with a background or border.

    div {
        box-shadow: 10px 10px;
    }


    It is same as text shadow parameter: horizontal and vertical.

    div {
        box-shadow: 10px 10px 5px grey;
    }


    You can add color and blur effect to box shadow.

    You can see the demo of box shadow here.

     

 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: