Over a million developers have joined DZone.

Mastering CSS3 Box-Shadow

· Web Dev Zone
This post want’s to bring up one of the great features introduced in CSS3, the box-shadow property. Now you can stop using images for displaying box-shadows, with just a few CSS lines you can create awesome effects. In this post, we will learn to add shadow effects on all four sides of a container:

The CSS3 code:
div {
    border:1px solid #EEE9E9;
    padding:30px;
    height:50px;
    width:200px;
    margin:50px;
    float:left;
}

 .bottom{
    -webkit-box-shadow:0 12px 10px -8px #00688B;
    -moz-box-shadow:0 12px 10px -8px #00688B;
    box-shadow:0 12px 10px -8px #00688B;
}

.top{
    -webkit-box-shadow:0 -10px 15px -10px #00688B;
    -moz-box-shadow:0 -10px 15px -10px #00688B;
    box-shadow:0 -10px 15px -10px #00688B;
}

.inset-top-bottom{
    -webkit-box-shadow:inset 0 8px 15px -8px #00688B,inset 0 -8px 15px -8px #00688B;
    -moz-box-shadow:inset 0 8px 15px -8px #00688B,inset 0 -8px 15px -8px #00688B;
    box-shadow:inset 0 8px 15px -8px #00688B,inset 0 -8px 15px -8px #00688B;
}

.left-right{
    -webkit-box-shadow:10px 0 12px -8px #00688B,-10px 0 12px -8px #00688B;
    -moz-box-shadow:10px 0 12px -8px #00688B,-10px 0 12px -8px #00688B;
    box-shadow:10px 0 12px -8px #00688B,-10px 0 12px -8px #00688B;
}

.left-right-bottom{
    -webkit-box-shadow:10px 0 12px -8px #00688B,-10px 0 12px -8px #00688B,0 8px 12px -6px #00688B;
    -moz-box-shadow:10px 0 12px -8px #00688B,-10px 0 12px -8px #00688B,0 8px 12px -6px #00688B;
    box-shadow:10px 0 12px -8px #00688B,-10px 0 12px -8px #00688BB,0 8px 12px -6px #00688B;
}
The HTML code:
<body>
        <div class="bottom">
            CSS3 bottom shadow
        </div>
             <div class="top">
            CSS3 top shadow
        </div>
         <div class="inset-top-bottom">
            CSS3 inset top-bottom shadow
        </div>
             <div class="left-right">
            CSS3 left-right shadow
        </div>
             <div class="left-right-bottom">
            CSS3 left-right-bottom shadow
        </div>             
 </body>
 
And the output will be:

 
Topics:

Published at DZone with permission of A. Programmer. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}