Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Mastering CSS3 Box-Shadow

DZone's Guide to

Mastering CSS3 Box-Shadow

· Web Dev Zone ·
Free Resource

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

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:

 
 

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}