{{ !articles[0].partner.isSponsoringArticle ? "Platinum" : "Portal" }} Partner
css,html5,html & xhtml

Mastering CSS3 Box-Shadow

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;

    -webkit-box-shadow:0 12px 10px -8px #00688B;
    -moz-box-shadow:0 12px 10px -8px #00688B;
    box-shadow:0 12px 10px -8px #00688B;

    -webkit-box-shadow:0 -10px 15px -10px #00688B;
    -moz-box-shadow:0 -10px 15px -10px #00688B;
    box-shadow:0 -10px 15px -10px #00688B;

    -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;

    -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;

    -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:
        <div class="bottom">
            CSS3 bottom shadow
             <div class="top">
            CSS3 top shadow
         <div class="inset-top-bottom">
            CSS3 inset top-bottom shadow
             <div class="left-right">
            CSS3 left-right shadow
             <div class="left-right-bottom">
            CSS3 left-right-bottom shadow
And the output will be:


Published at DZone with permission of {{ articles[0].authors[0].realName }}, DZone MVB. (source)

Opinions expressed by DZone contributors are their own.

{{ tag }}, {{tag}},

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

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks