Subtle CSS3 box shadows
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Subtle CSS Box Shadows - BMC WebDesign</title>
<style type="text/css">
@font-face {
    font-family: 'Qlassik';
    src: url('http://bmcenterprises.wdfiles.com/local--files/fonts/Qlassik_TB-webfont.eot');
    src: local('☺'), url('http://bmcenterprises.wdfiles.com/local--files/fonts/Qlassik_TB-webfont.woff') format('woff'), url('http://bmcenterprises.wdfiles.com/local--files/fonts/Qlassik_TB-webfont.ttf') format('truetype'), url('http://bmcenterprises.wdfiles.com/local--files/fonts/Qlassik_TB-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family:"Lucida Grande";
    font-size: 12px;
}
h1, h2, h3 {text-align: center;}
.infobox-container {
    overflow: hidden;
    width: 860px;
    height: 250px;
    margin: 50px auto 0;
    position: relative;
}
.infobox {
    padding: 2px 10px;
    border: 1px solid #ccc;
    color: #1c1c1c;
    width: 200px;
    position: relative;
    float: left;
    margin: 20px 30px;
    background-color: #eef1f1;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#e2e2e2));
    background-image: -moz-linear-gradient(top, #f3f3f3, #e2e2e2);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 1px 0 0 #fff inset,
                        0 1px 0 #fff inset;
    /*-moz-box-shadow: 1px 0 0 #fff inset,
                     0 1px 0 #fff inset;
    box-shadow: 1px 0 0 #fff inset,
                0 1px 0 #fff inset;*/
}
 
.infobox.shadow:after, .infobox.shadow:before {
    content: '\00a0';
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: -1;
    bottom: -41px;
    left: 50%;
    margin-left: -50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-box-shadow: 0 0 46px rgba(0,0,0,0.5);
    /*-moz-box-shadow: 0 0 46px rgba(0,0,0,0.5);
    box-shadow: 0 0 46px rgba(0,0,0,0.5);*/
    -webkit-transform: scaleX(2) scaleY(0.2);
    /*-moz-transform: scaleX(2) scaleY(0.2);
    transform: scaleX(2) scaleY(0.2);*/
}
 
.infobox.shadow:before {bottom: inherit; top: -41px;}
 
/* Vertical Shadow */
 
.infobox.shadowVert {
    min-height: 210px;
    -webkit-box-shadow: 1px 0 0 #fff inset,
                        0 1px 0 #fff inset,
                        -1px 0 0 #f3f3f3 inset;
    /*-moz-box-shadow: 1px 0 0 #fff inset,
                     0 1px 0 #fff inset,
                     -1px 0 0 #f3f3f3 inset;
    box-shadow: 1px 0 0 #fff inset,
                0 1px 0 #fff inset,
                -1px 0 0 #f3f3f3 inset;*/
}
.infobox.shadowVert:after, .infobox.shadowVert:before {
    content: '\00a0';
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: -1;
    left: -41px;
    top: 50%;
    margin-top: -50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-box-shadow: 0 0 46px rgba(0,0,0,0.5);
    /*-moz-box-shadow: 0 0 46px rgba(0,0,0,0.5);
    box-shadow: 0 0 46px rgba(0,0,0,0.5);*/
    -webkit-transform: scaleY(2) scaleX(0.2);
    /*-moz-transform: scaleY(2) scaleX(0.2);
    transform: scaleY(2) scaleX(0.2);*/
}
.infobox.shadowVert:after {
    left: inherit;
    right: -41px;
}
 
/* Alternative Shadow */
.infobox.shadowAlt {
    background-color: #eee;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#fff), color-stop(0.2, #fff));
    background-image: -moz-linear-gradient(top, #ddd, #fff, #fff 0.2)
    -webkit-box-shadow: 0 1px 0 #fff inset;
    -moz-box-shadow: 0 1px 0 #fff inset;
    box-shadow: 0 1px 0 #fff inset;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.infobox.shadowAlt:after {
    content: '\00a0';
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: -1;
    bottom: -41px;
    left: 50%;
    margin-left: -50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-box-shadow: 0 0 22px rgba(0,0,0,0.6);
    /*-moz-box-shadow: 0 0 22px rgba(0,0,0,0.6);
    box-shadow: 0 0 22px rgba(0,0,0,0.6);*/
    -webkit-transform: scaleX(2) scaleY(0.2);
    /*-moz-transform: scaleX(2) scaleY(0.2);
    transform: scaleX(2) scaleY(0.2);*/
}
 
/* Action Button */
p.button-bar {text-align: center; font-size: 20px; padding: 4px 0;}
.button-bar a {
    color: #2c9bd4;    
    text-decoration: none;
    font-family: 'Qlassik';
    -webkit-animation-name: fade-in;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
}
.button-bar a:hover {
       text-decoration: underline;
}
 
@-webkit-keyframes fade-in {
0% {
    opacity: 0;
}
60% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
</style>
<link rel="shortcut icon" href="http://css3.wikidot.com/local--favicon/favicon.gif"/> 
<link rel="icon" type="image/gif" href="http://css3.wikidot.com/local--favicon/favicon.gif"/>
</head>
<body>
<h1>Subtle CSS3 Box Shadows</h1>
<div class="infobox-container">
<div class="infobox shadow">
<h3>Horizontal Shadow Box</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
 
<div class="infobox shadowVert">
<h3>Vertical Shadow Box</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="infobox shadowAlt">
<h3>Alternative Shadow Box</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
    <p class="button-bar"> 
         <a href="/blog:subtle-css3-box-shadows">back to the BMC Blog</a>
    </p>
</body>
</html>

Subtle CSS3 box shadows

Create a sophisticated infobox with subtle CSS3 box shadows.

After reading an article about a page-curling CSS3 box shadow, I was thinking of other ways to make use of the versatile property; this is what I came up with - a sophisticated infobox with shadows that make it pop.

shadow-box-all.png

The markup

The markup is ultra-simple: one div wrapper and a header.

<div class="infobox shadow">
<h3>Horizontal Shadow Box</h3>
<p>Content</p>
</div>

The CSS

This is where the magic happens. First we'll give the infobox class some basic styling to make it look good. Note that I've only included webkit prefixes for the CSS3 properties.

.infobox {
    padding: 2px 10px;
    border: 1px solid #ccc;
    color: #1c1c1c;
    width: 200px;
    position: relative;
    margin: 20px auto;
    background-color: #eef1f1;
    background-image: -webkit-gradient(linear,0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
    -webkit-border-radius: 2px;
    -webkit-box-shadow: 1px 0 0 #fff inset,
                        0 1px 0 #fff inset;
}
shadow-box-blank.png

Now to add the shadows, we'll make use of the :before and :after pseudo classes - this eliminates the need for additional markup. First we make a circle, and then scale it horizontally to stretch it out, and vertically to squash it. Then some absolute positioning and a z-index and we're almost done.

.infobox.shadow:after, .infobox.shadow:before {
    content: '\00a0';
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: -1;
    left: 50%;
    margin-left: -50px;
    bottom: -41px;
    -webkit-border-radius: 50px;
    -webkit-box-shadow: 0 0 46px rgba(0,0,0,0.5);
    -webkit-transform: scaleX(2) scaleY(0.2);
}
 
.infobox.shadow:before {bottom: inherit; top: -41px;}

Notice how the shadow is placed in the centre, no matter how wide the infobox is, by using left: 50% and then a negative margin of half its width.

This is what it looks like without a background on the infobox:

shadow-box-seethru.png

And the final product:

shadow-box-horizontal.png

Altering the shadow's radius and opacity, or its rotation, you can create some very different effects. See below for some different infoboxes that I created, or check them out in the live demo.

shadow-box-all.png

For the vertical shadows, I just inverted the scales to stretch it vertically, and adjusted the other properties to suit. I also had to define a min-height, otherwise you could see the shadow poking out at the top if the box did not have enough content in it.

.infobox.shadowVert {min-height: 210px;}
 
.infobox.shadowVert:after, .infobox.shadowVert:before {
    content: '\00a0';
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: -1;
    left: -41px;
    top: 50%;
    margin-top: -50px;
    -webkit-border-radius: 50px;
    -webkit-box-shadow: 0 0 46px rgba(0,0,0,0.5);
    -webkit-transform: scaleY(2) scaleX(0.2);
}
.infobox.shadowVert:after {left: inherit;right: -41px;}

Currently, the shadows only work in Safari and Chrome. I had a go at getting it to work in Firefox, but the shadow was being cut off for some reason that I'm not quite sure of. Click that big blue button below for a live demo of the shadows.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Subtle CSS Box Shadows - BMC WebDesign</title>
<style type="text/css">
@font-face {
    font-family: 'Qlassik';
    src: url('http://bmcenterprises.wdfiles.com/local--files/fonts/Qlassik_TB-webfont.eot');
    src: local('☺'), url('http://bmcenterprises.wdfiles.com/local--files/fonts/Qlassik_TB-webfont.woff') format('woff'), url('http://bmcenterprises.wdfiles.com/local--files/fonts/Qlassik_TB-webfont.ttf') format('truetype'), url('http://bmcenterprises.wdfiles.com/local--files/fonts/Qlassik_TB-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family:"Lucida Grande";
    font-size: 12px;
}
h1, h2, h3 {text-align: center;}
.infobox-container {
    overflow: hidden;
    width: 860px;
    height: 250px;
    margin: 50px auto 0;
    position: relative;
}
.infobox {
    padding: 2px 10px;
    border: 1px solid #ccc;
    color: #1c1c1c;
    width: 200px;
    position: relative;
    float: left;
    margin: 20px 30px;
    background-color: #eef1f1;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#e2e2e2));
    background-image: -moz-linear-gradient(top, #f3f3f3, #e2e2e2);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 1px 0 0 #fff inset,
                        0 1px 0 #fff inset;
    /*-moz-box-shadow: 1px 0 0 #fff inset,
                     0 1px 0 #fff inset;
    box-shadow: 1px 0 0 #fff inset,
                0 1px 0 #fff inset;*/
}
 
.infobox.shadow:after, .infobox.shadow:before {
    content: '\00a0';
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: -1;
    bottom: -41px;
    left: 50%;
    margin-left: -50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-box-shadow: 0 0 46px rgba(0,0,0,0.5);
    /*-moz-box-shadow: 0 0 46px rgba(0,0,0,0.5);
    box-shadow: 0 0 46px rgba(0,0,0,0.5);*/
    -webkit-transform: scaleX(2) scaleY(0.2);
    /*-moz-transform: scaleX(2) scaleY(0.2);
    transform: scaleX(2) scaleY(0.2);*/
}
 
.infobox.shadow:before {bottom: inherit; top: -41px;}
 
/* Vertical Shadow */
 
.infobox.shadowVert {
    min-height: 210px;
    -webkit-box-shadow: 1px 0 0 #fff inset,
                        0 1px 0 #fff inset,
                        -1px 0 0 #f3f3f3 inset;
    /*-moz-box-shadow: 1px 0 0 #fff inset,
                     0 1px 0 #fff inset,
                     -1px 0 0 #f3f3f3 inset;
    box-shadow: 1px 0 0 #fff inset,
                0 1px 0 #fff inset,
                -1px 0 0 #f3f3f3 inset;*/
}
.infobox.shadowVert:after, .infobox.shadowVert:before {
    content: '\00a0';
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: -1;
    left: -41px;
    top: 50%;
    margin-top: -50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-box-shadow: 0 0 46px rgba(0,0,0,0.5);
    /*-moz-box-shadow: 0 0 46px rgba(0,0,0,0.5);
    box-shadow: 0 0 46px rgba(0,0,0,0.5);*/
    -webkit-transform: scaleY(2) scaleX(0.2);
    /*-moz-transform: scaleY(2) scaleX(0.2);
    transform: scaleY(2) scaleX(0.2);*/
}
.infobox.shadowVert:after {
    left: inherit;
    right: -41px;
}
 
/* Alternative Shadow */
.infobox.shadowAlt {
    background-color: #eee;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#fff), color-stop(0.2, #fff));
    background-image: -moz-linear-gradient(top, #ddd, #fff, #fff 0.2)
    -webkit-box-shadow: 0 1px 0 #fff inset;
    -moz-box-shadow: 0 1px 0 #fff inset;
    box-shadow: 0 1px 0 #fff inset;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.infobox.shadowAlt:after {
    content: '\00a0';
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: -1;
    bottom: -41px;
    left: 50%;
    margin-left: -50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-box-shadow: 0 0 22px rgba(0,0,0,0.6);
    /*-moz-box-shadow: 0 0 22px rgba(0,0,0,0.6);
    box-shadow: 0 0 22px rgba(0,0,0,0.6);*/
    -webkit-transform: scaleX(2) scaleY(0.2);
    /*-moz-transform: scaleX(2) scaleY(0.2);
    transform: scaleX(2) scaleY(0.2);*/
}
 
/* Action Button */
p.button-bar {text-align: center; font-size: 20px; padding: 4px 0;}
.button-bar a {
    color: #2c9bd4;    
    text-decoration: none;
    font-family: 'Qlassik';
    -webkit-animation-name: fade-in;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
}
.button-bar a:hover {
       text-decoration: underline;
}
 
@-webkit-keyframes fade-in {
0% {
    opacity: 0;
}
60% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
</style>
<link rel="shortcut icon" href="http://css3.wikidot.com/local--favicon/favicon.gif"/> 
<link rel="icon" type="image/gif" href="http://css3.wikidot.com/local--favicon/favicon.gif"/>
</head>
<body>
<h1>Subtle CSS3 Box Shadows</h1>
<div class="infobox-container">
<div class="infobox shadow">
<h3>Horizontal Shadow Box</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
 
<div class="infobox shadowVert">
<h3>Vertical Shadow Box</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="infobox shadowAlt">
<h3>Alternative Shadow Box</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
    <p class="button-bar"> 
         <a href="/blog:subtle-css3-box-shadows">back to the BMC Blog</a>
    </p>
</body>
</html>

Enjoy the article? Tweet it!

Discussion - No comments yet…6 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.