Over a million developers have joined DZone.
Platinum Partner

Mastering CSS3 Box-Shadow

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix. Download this Forrester Report to gain a better understanding of the low-code platform market and how to make a strategic platform selection you won’t regret.

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:

 

The Web Dev Zone is brought to you in partnership with Mendix. Better understand the aPaaS landscape and how the right platform can accelerate your software delivery cadence and capacity with the Gartner 2015 Magic Quadrant for Enterprise Application Platform as a Service.

Topics:

Published at DZone with permission of A. Programmer .

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}