Box Shadow em CSS3

Não é necessário utilizar mais o Photoshop para criar caixas com sombras, com CSS3 essa tarefa é muito mais simples e prática.

• CSS3 box-shadow

Para copiar o código clicar no ícone abaixo

<ul class="box">
<li></li>
</ul>

Para copiar o código clicar no ícone abaixo

ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }

ul.box li {
position: relative;
float: left;
width: 300px;
height: 200px;
padding: 0;
border: 4px solid #efefef;
margin: 0 30px 30px 0;
background: #14C2EA;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }

ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); }

ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }

CSS3 box-shadow

Para copiar o código clicar no ícone abaixo

<div id="box">
<h2></h2>
</div>

Para copiar o código clicar no ícone abaixo

#box {
  position:relative;
  width:50%;
  background:#ddd;
  -moz-border-radius:4px;
  border-radius:4px;
  padding:2em 1.5em;
  color:rgba(0,0,0,.8);
  text-shadow:0 1px 0 #fff;
  line-height:1.5;
  margin:30px auto;
}
#box:before,
#box:after {
  z-index:-1;
  position:absolute;
  content:"";
  bottom:15px;
  left:10px;
  width:50%;
  top:80%;
  max-width:300px;
  background:rgba(0,0,0,0.7);
  -webkit-box-shadow:0 15px 10px rgba(0,0,0,0.7);
  -moz-box-shadow:0 15px 10px rgba(0,0,0,0.7);
  box-shadow:0 15px 10px rgba(0,0,0,0.7);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  -o-transform:rotate(-3deg);
  -ms-transform:rotate(-3deg);
  transform:rotate(-3deg);
}
#box:after {
  -webkit-transform:rotate(3deg);
  -moz-transform:rotate(3deg);
  -o-transform:rotate(3deg);
  -ms-transform:rotate(3deg);
  transform:rotate(3deg);
  right:10px;
  left:auto;
}

CSS3 Perspective Shadow

Para copiar o código clicar no ícone abaixo

<div id="box">
    <div class="bg_perspective">
        <div class="bg_text-shadow">Perspective Shadow</div>
    </div>
</div>

Para copiar o código clicar no ícone abaixo

#box{
margin: 25px auto;
width: 50%;
}
.bg_text-shadow {
padding: 1.4em;
text-align: center;
font-size: 1.8em;
line-height: 1.4em;
color: rgba(0,0,0, .8);
text-shadow: 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
.bg_perspective {
position: relative;
background: #B1B3B2;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.bg_perspective:before, .tm_perspective:after {
content: "";
position: absolute;
z-index: -2;
}
.bg_perspective:before {
left: 80px;
bottom: 3px;
width: 50%;
height: 35%;
max-width: 200px;
box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
-webkit-transform: skew(50deg);
-moz-transform: skew(50deg);
-ms-transform: skew(50deg);
-o-transform: skew(50deg);
transform: skew(50deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}

CSS3  box-shadow horizontal

Para copiar o código clicar no ícone abaixo

<div id="box">
    <div class="bg_curved-hz-2">
        <div class="bg_text-shadow">CSS3 Shadow with two horizontal curves</div>
    </div>
</div>

Para copiar o código clicar no ícone abaixo

#box {
margin: 25px auto;
width: 50%;
}
.bg_text-shadow {
padding: 1.4em;
text-align: center;
font-size: 1.8em;
line-height: 1.4em;
color: rgba(0,0,0, .8);
text-shadow: 0 1px 0 #fff;
box-shadow: inset 0 0 20px rgba(0,0,0,.1);
}
.bg_curved-vt-2:before,
.bg_curved-vt-2:after {
content: "";
position: absolute;
z-index: -2;
}
.bg_curved-vt-2:before {
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    box-shadow:0 0 8px rgba(0,0,0,0.6);
    border-radius:10px / 100px;
}
.bg_curved-hz-2:before {
top: 0px;
bottom: 0px;
left: 10px;
right: 10px;
box-shadow: 0 0 7px rgba(0,0,0,0.6);
border-radius: 100px / 10px;
}
.bg_curved-hz-2 {
    position:relative;
    background:#fff;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
}
.bg_curved-hz-2:before,
.bg_curved-hz-2:after {
    content:"";
    position:absolute;
    z-index:-2;
}