Tuesday, October 09, 2012

Creating different CSS3 box shadows effects

CSS Box Shadow Effect 6

In this tutorial we are going to be creating box shadow effects with just CSS.

CSS Box Shadow

We are going to be using the CSS box-shadow property which is one my favourite CSS properties which you will see in this tutorial how easy you can use it.

The box-shadow property allows you to easily create multiple drop shadows on box elements by specifying values for colour, size, blur and offset.

The box-shadow property accepts 2-4 options, the required options are horizontal offset and vertical offset, the two optional options are spread distance and colour.

box-shadow: horizontal vertical spread colour;

Examples

box-shadow: 10px 10px;
box-shadow: 10px 10px 5px #888;
box-shadow: inset 2px 2px 2px 2px black;
box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;

Browser Support

All of the major newest browsers support box-shadow property.

  • Internet Explorer 9.0 and higher
  • Firefox 3.5 and higher
  • Chrome 1 and higher
  • Safari 3 and higher
  • Opera 10.5 and higher

With many new CSS3 properties you need to prefix the property with browser specific tags.

For firefox you need to use -moz-, for chrome/safari you need to use -webkit.
The box-shadow property is no different.
For Firefox 3.5 you need to prefix with -moz-box-shadow, but for Firefox 4.0 and higher you don't need to use the prefix anymore.
For Chrome/safari you still need to use the -webkit-box-shadow.
For Opera you don't need to prefix the property and can just use box-shadow.

CSS Box Shadow Effect 1

CSS Box Shadow Effect 1

This will create a standard box shadow effect with the shadow moved into the element to create a raised box look.

HTML

<div class="box effect1">
<h3>Effect 1</h3>
</div>

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}

.box {
    width:70%; height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 1
 * ===============================================*/
.effect1{
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
}

CSS Box Shadow Effect 2

CSS Box Shadow Effect 2

This effect will add shadows to the bottom corners of the boxes to create a lifted corner look on the boxes. This effect uses both the :before and :after properties to create new elements used for the corners.

HTML

<div class="box effect2">
    <h3>Effect 2</h3>
</div>

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}

.box {
    width:70%; height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2 { position: relative; }
.effect2:before, .effect2:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px; top: 80%;
    left: 10px;
    width: 50%; max-width:300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;

    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.effect2:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px; left: auto;
}

CSS Box Shadow Effect 3

CSS Box Shadow Effect 3

This uses half of the effect approve and will add a lifted corner to the bottom left of the box.

HTML

<div class="box effect3">
    <h3>Effect 3</h3>
</div>

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}

.box {
    width:70%; height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 3
 * ===============================================*/
.effect3 { position: relative; }
.effect3:before {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px; top: 80%;
    left: 10px;
    width: 50%; max-width:300px;
    background: #777;
  
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;

    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

CSS Box Shadow Effect 4

CSS Box Shadow Effect 4

Effect 4 will lift the corner on the bottom right of the box.

HTML

<div class="box effect4">
    <h3>Effect 4</h3>
</div>

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}

.box {
    width:70%; height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 4
 * ===============================================*/
.effect4 { position: relative; }
.effect4:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px; top: 80%;
    right: 10px; left: auto;
    width: 50%; max-width:300px;
    background: #777;

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

    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
}

CSS Box Shadow Effect 5

CSS Box Shadow Effect 5

This is expands on the effect 2 and will increase the angle of the shadows.

HTML

<div class="box effect5">
    <h3>Effect 5</h3>
</div>

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}

.box {
    width:70%; height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 5
 * ===============================================*/
.effect5 { position: relative; }
.effect5:before, .effect5:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 25px; top: 80%;
    left: 10px;
    width: 50%; max-width:300px;
    background: #777;

    -webkit-box-shadow: 0 35px 20px #777;
    -moz-box-shadow: 0 35px 20px #777;
    box-shadow: 0 35px 20px #777;

    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);
}

.effect5:after {
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

CSS Box Shadow Effect 6

CSS Box Shadow Effect 6

This effect will create a curved shadow at the bottom of the box.

HTML

<div class="box effect6">
    <h3>Effect 6</h3>
</div>

CSS

.box h3 {
    text-align:center;
    position:relative;
    top:80px;
}

.box {
    width:70%; height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 6
 * ===============================================*/
.effect6 {
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.effect6:before, .effect6:after {
    content:"";
    position:absolute;
    z-index:-1;

    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%; bottom:0;
    left:10px; right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

.effect6:after {
    right:10px; left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
    transform:skew(8deg) rotate(3deg);
}

CSS Box Shadow Effect 7

CSS Box Shadow Effect 7

This effect uses the previous effect and adds another shadow to the top of the box.

HTML

<div class="box effect7">
    <h3>Effect 7</h3>
</div>

CSS

.box h3 {
    text-align:center;
    position:relative;
    top:80px;
}

.box {
    width:70%; height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 7
 * ===============================================*/
.effect7 {
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.effect7:before, .effect7:after {
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0; bottom:0;
    left:10px; right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

.effect7:after {
    right:10px; left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
    transform:skew(8deg) rotate(3deg);
}

CSS Box Shadow Effect 8

CSS Box Shadow Effect 8

The final effect will add rounded shadows to either side of the box.

HTML

<div class="box effect8">
    <h3>Effect 8</h3>
</div>

CSS

.box h3 {
    text-align:center;
    position:relative;
    top:80px;
}

.box {
    width:70%; height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 8
 * ===============================================*/
.effect8 {
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.effect8:before, .effect8:after {
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top: 10px; bottom: 10px;
    left:0; right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

.effect8:after {
    right:10px; left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
    transform:skew(8deg) rotate(3deg);
}

View Demo