Grains Of Sand Web Design, CSS Demos & HTML5 Templates by tupence

CSS3 Demos - box-shadow

With the CSS3 box-shadow property you can add single or multiple, inner or outer drop-shadows to elements without the need for images.

Basics

Syntax

box-shadow requires you to set the horizontal & vertical offsets, you can then optionally set the blur and colour, you can also choose to have the shadow inset instead of the default outset. Colour can be defined as hex or rgba.

box-shadow: inset/outset h-offset v-offset blur spread color;
Explanation of the values...
inset/outset -- whether the shadow is inside or outside the box. If not specified it will default to outset.
h-offset -- the horizontal offset of the shadow (required value)
v-offset -- the vertical offset of the shadow (required value)
blur -- as it says, the blur of the shadow
spread -- moves the shadow away from the box equally on all sides. A positive value causes the shadow to expand, negative causes it to contract. Though this value isn't often used, it is useful with multiple shadows.
color -- as it says, the colour of the shadow

Usage

box-shadow: 2px 4px 10px #000; a black shadow with a horizontal outset of 2px, vertical of 4px and a blur of 10px

Examples and Code

Basic Shadows

DEMO 1 - Equal Shadow On All Sides

Shadow appears equally on all four sides of the box, there's no horizontal or vertical offset.

section#shadow1{
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .65);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .65);
box-shadow: 0 0 10px rgba(0,0,0, .65);
}

DEMO 2 - Shadow Offset Bottom & Right

The shadow is offset to the right and bottom of the box by using an equal horizontal and vertical offset with a positive value.

section#shadow2{
-webkit-box-shadow: 3px 3px 4px #636363;
-moz-box-shadow: 3px 3px 4px #636363;
box-shadow: 3px 3px 4px #636363;
}

DEMO 3 - Shadow Offset Top & Left

The shadow is only on one side of the box by using an equal horizontal and vertical offset with a negative value.

section#shadow3{
-webkit-box-shadow: -3px -3px 10px #9E9E9E;
-moz-box-shadow: -3px -3px 10px #9E9E9E;
box-shadow: -3px -3px 10px #9E9E9E;
}

DEMO 4 - Shadow On One Side Only

The shadow is only on one side of the box, this time the bottom. Created with two shadows, one the oolour of the box's background, and making use the shadows' spread value.

section#shadow4{
background:#e7e1aa;
/*The first shadow should be the colour of the box's background, the second shadow is the shadow you see. The spread value (the 4th value) of the first shadow should be the same size as the blur (the 3rd value) in the second shadow*/
-webkit-box-shadow: 0 0 0 6px #e7e1aa, 0 10px 6px #424242;
-moz-box-shadow: 0 0 0 6px #e7e1aa, 0 10px 6px #424242;
box-shadow: 0 0 0 6px #e7e1aa, 0 10px 6px #424242;
/*To place the shadow on a different side...
top only = box-shadow: 0 0 0 6px #e7e1aa, 0 -10px 6px #424242;
left only = box-shadow: 0 0 0 6px #e7e1aa, -10px 0 6px #424242;
right only = box-shadow: 0 0 0 6px #e7e1aa, 10px 0 6px #424242;*/
}

DEMO 5 - Inset Shadow

This time the shadow is inside the box, this is acheived by adding inset to the start of the syntax. Please note that IE8 and earlier do not support inset shadows, even with CSS3Pie (as of version 1.0 beta5), future versions of CSS3Pie may support it.

section#shadow-inset{
padding: 30px; /*allow enough padding for the shadow not to cover the content*/
-moz-box-shadow: inset 0 0 25px #246476;
-webkit-box-shadow: inset 0 0 25px #246476;
box-shadow: inset 0 0 25px #246476;
}

DEMO 6 - Two Coloured Shadows

This box uses two shadows of different colours, one inset and one on the outside. Please note this will not render correctly in IE8 or earlier as they do not support inset shadows, even with CSS3Pie (version 1.0 beta5), future versions of CSS3Pie may support it.

section#shadow-color{
margin: 30px; /*at least the size of the outer shadow's blur*/
padding: 30px; /*at least the size of the outer shadow's blur*/
-webkit-box-shadow: inset 0 0 25px #7c0e7b, 0 0 20px rgba(76,63,241, .9);
-moz-box-shadow: inset 0 0 25px #7c0e7b, 0 0 20px rgba(76,63,241, .9);
box-shadow: inset 0 0 25px #7c0e7b, 0 0 20px rgba(76,63,241, .9);
}

More Advanced Uses

DEMO 7 - Animate A Button

Press Me!

HTML

<p class="button"><a href="#">Press Me!</a></p>

CSS

/**First style the paragraph text**/
#content p.button{
font-size:1.4em;
text-transform:uppercase;
text-align:center;
}

/**Now style the link to simulate a button**/
#content .button a{
width: 40%;
display:block; /*makes the button span the width specified on the line above*/
padding: 8px 10px;
background: #0e9e14;
text-decoration:none; /*remove the underline from the link*/
color: #fff;
font-weight:bold;
text-shadow: 0px 1px 2px #5e5e5e; /*see cssdemos.tupence.co.uk/text-shadow.htm for more info*/
/*give the button curved corners, see cssdemos.tupence.co.uk/border-radius.htm for more info*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/*Now give the button some depth using multiple shadows. The 1st shadow is inset and slightly darker in colour than the button background. The 2nd shadow is darker again, this is the one that provides the depth - for a deeper button increase the 2nd value of this shadow from 5px. The 3rd shadow is a shade of grey and is simply used as a normal drop shadow*/
-webkit-box-shadow: inset 0px 1px 5px #0e9713, 0px 5px 0px 0px #226a25, 0px 8px 5px #999;
-moz-box-shadow: inset 0px 1px 5px #0e9713, 0px 5px 0px 0px #226a25, 0px 8px 5px #999;
box-shadow: inset 0px 1px 5px #0e9713, 0px 5px 0px 0px #226a25, 0px 8px 5px #999;
}

/*Finally reduce the shadow sizes when the button is hovered or in focus, to give the impression of the button being pressed*/
#content .button a:active, #content .button a:hover, #content .button a:focus {
color:#ccc;
-webkit-box-shadow: inset 0px 1px 0px #0e9713, 0px 2px 0px 0px #226a25, 0px 2px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #0e9713, 0px 2px 0px 0px #226a25, 0px 2px 5px #999;
box-shadow: inset 0px 1px 0px #0e9713, 0px 2px 0px 0px #226a25, 0px 2px 5px #999;
}

DEMO 8 - Give Images A Raised Effect

HTML

<section id="images">
<img src="assets/box-shadow01.jpg" width="159" height="200" alt="Horse's head">
</section>

CSS

#images img{
margin:10px 5px;
-webkit-box-shadow: 2px 3px 8px #444;
-moz-box-shadow: 2px 3px 8px #444;
box-shadow: 2px 3px 8px #444;
}

Browser Support and prefixes

Support

Chrome -- full support since version 10.0
Firefox -- full support since version 3.5
Opera -- full support since version 10.5
Safari -- full support since version 5.0
Internet Explorer
IE9 and later -- full support
IE8 and earlier -- requires CSS3Pie - inset shadows are not supported, even with CSS3Pie

Prefixes

Firefox: -moz-box-shadow
Chrome and Safari: -webkit-box-shadow

More CSS3 Demos This Way