Como fazer caixas sombreadas, passos 1 e 2

Outro elemento bastante usado em design elaborados são caixas sombreadas. Vejamos como elas funcionam bem para complementar o design clean da CNN.com:

No entanto, os desenvolvedores da CNN parecem ter tido muito trabalho elaborando esse css. Vejamos como eles fizeram (retirado do css da CNN):

/* SECTION SHADING SPRITE CSS */

.cnn_shdsectbin .cnn_shdcaheader,
.cnn_shdsectbin .cnn_shdcafooter,
.cnn_shdmnfooter,
.cnn_shd755pxfooter,
.cnn_shd755pxheader,
.cnn_shd755px2footer,
.cnn_shd755px2header,
.cnn_shd235pxheader,
.cnn_shd235pxfooter { height:6px;overflow:hidden;background:transparent url('http://i.cdn.turner.com/cnn/.element/img/3.0/global/shade/sprite_shades.gif') 0px -81px no-repeat; }

.cnn_shdsectbin .cnn_shdcafooter { background-position:0px -124px; }

.cnn_shdmnfooter { background-position:0px -174px;clear:both; }

.cnn_shd755pxheader { background-position:0px -252px;height:7px; }
.cnn_shd755pxfooter { background-position:0px -214px;height:7px; }

.cnn_shd755px2header { background-position:0px -342px;height:7px; }
.cnn_shd755px2footer { background-position:0px -299px;height:7px; }

.cnn_shd235pxheader { background-position:0px -424px;height:7px; }
.cnn_shd235pxfooter { background-position:0px -383px;height:7px; }

Reparem como eles chamam a imagem "sprite_shades.gif" contendo diversos tipos de bordas sombreadas e a reposicionam, usando background-position de acordo com a classe e largura do box em que são utilizadas. O resultado final ficou excelente, e é melhor dar load de apenas uma imagem mesmo, por questões de performance... Mas, NOSSA, isso deve ter dado um trabalho infernal!

Felizmente, agora vou lhes ensinar o que os desenvolvedores da CNN aparentemente não sabem (ou mesmo sabendo, preferiram ignorar para justificar mais horas no projeto); Como fazer caixas sombreadas que funcionam em todos os browsers atuais (incluindo o ie6!) e sem usar nenhuma imagem, muito menos essa engenharia de background-position da CNN... Não acredita? Então vamos lá:

Passo 1

Primeiro vamos definir o html de nossa caixa:

<div class="sbox">
 <h3>Só o sombra sabe</h3>
 <p>O mal que se esconde no coração desses geeks que ficam até altas horas da noite na web.</p>
</div>

Agora vamos deixar nossa caixa mais bonitinhas usando um pouco de css:

div.sbox {
 width:482px;
 padding:8px;
 background:#fff;
 border:1px solid #999;
 font-family:georgia,arial,sans-serif;
 font-size:120%;
}
div.sbox h3 {
 padding:0 0 12px 0;
 margin:0;
 font-weight:bold;
 font-size:130%;
}
div.sbox p {
 margin:0 0 8px 0;
}

Definimos a fonte e o espaçamento, assim como uma borda em cinza claro. Nossa caixa está agora um pouco mais interessante:

Ver Passo 1

***

Passo 2

Agora vamos adicionar sombreamento a nossa caixa. Para tal vamos utilizar a tag box-shadow, própria do CSS3, assim como as tags proprietárias -moz-box-shadow e -webkit-box-shadow, que são suportadas, respectivamente, pelo Firefox e o Chrome/Safari:

div.sbox {
 width:482px;
 padding:8px;
 background:#fff;
 border:1px solid #ccc;
 font-family:georgia,arial,sans-serif;
 font-size:120%;
 box-shadow:0 0 4px #ccc;
 -moz-box-shadow:0 0 4px #ccc;
 -webkit-box-shadow:0 0 4px #ccc;
}

Isso nos trará uma caixa sobreada, algo muito valorizado por navegantes de fino trato:

Ver Passo 2

Acho que muita gente está deixando o ceticismo de lado agora... Mas ainda não venci o maior obstáculo - porque nossa caixa ainda não tem sombreado algum no IE.

A seguir, no Passo 3, usaremos alguns filtros específicos do IE para finalizar nossa epopéia e deixar os desenvolvedores da CNN um pouco envergonhados...

***