Encontramos 3 métodos diferentes para fazer um efeito de sombra. São os seguintes, que veremos comentados neste artigo:

1. Método background-color
2. Método canal alpha
3. Método esticar imagem

Método Background color

Este método é bastante simples. Baseia-se em definir três caixas trasladadas, com diversas cores de fundo. Os elementos com as classes "blur" e "shadow" se definirão com tons cinzentos para criar o efeito de sombreado.

Código HTML:

<div class="blur">
<div class="shadow">
<div class="content">bla bla</div>
</div>
</div>

Código CSS:

.blur{
   background-color: #ccc; /*shadow color*/
   color: inherit;
   margin-left: 4px;
   margin-top: 4px;
}

.shadow,
.content{
   position: relative;
   bottom: 2px;
   right: 2px;
}

.shadow{
   background-color: #666; /*shadow color*/
   color: inherit;
}

.content{
   background-color: #fff; /*background color of content*/
   color: #000; /*text color of content*/
   border: 1px solid #000; /*border color*/
   padding: .5em 2ex;
}

A única desvantagem deste método é que usa cores definidas para as sombras e isso fazer com que não se possa misturar este efeito com outros elementos. Com um fundo branco, as sombras em cinza ficam bem, mas por exemplo, se o fundo fosse vermelho, então o efeito de sombreado deveria se realizar com tons vermelhos escuros.

Podemos ver o exemplo em funcionamento em uma página a parte.

Método canal alpha

Este método é muito parecido ao anterior, mas soluciona o problema de se misturar com outros elementos. O fundo da página onde será mostrado o elemento sombreado é indiferente, inclusive se o sombreado for na mesma página sobre diferentes fundos. Utilize imagens de fundo em formato PNG "alpha transparentes", ao invés de cores definidas na folha de estilo.

O código HTML necessário é o mesmo do exemplo anterior, você simplesmente deve modificar o código CSS, em concreto para as classes "blur" e "shadow". Mostramos o código CSS para este exemplo.

<style type=text/css>
.blur{
   background: transparent url(shadow1.png);
/*rota para o 80%-transparente 1x1 pixel colorido em preto */
   color: inherit;
   margin-left: 4px;
   margin-top: 4px;
}

.shadow{
   background: transparent url(shadow2.png);
/*rota para o 60%-transparent 1x1pixel colorido em preto */
   color: inherit;
}

.shadow,
.content{
   position: relative;
   bottom: 2px;
   right: 2px;
}

.content{
   background-color: #fff; /*background color of content*/
   color: #000; /*text color of content*/
   border: 1px solid #000; /*border color*/
   padding: .5em 2ex;
}
</style>

Para provar a vantagem deste tipo de fundo, podemos mudar a cor de fundo da página web e veremos como a sombra também mudará de cor.

Podemos ver o exemplo em funcionamento em uma página a parte .

Método esticar imagem

Opinamos que os dois métodos anteriores não são tão bons ou muito bons, devido a que a sombra não parece muito natural. Em outras palavras, não é um efeito suficientemente realista. De forma que abrimos nosso editor gráfico, criamos uma caixa retangular com efeito de sombra e exportamos a uma imagem. Possivelmente possa utilizar essa imagem para criar o efeito de sombra.

O código HTML experimental

<div class="shade">
<img src="shadow.png" width="0" height="0" alt="" class="shade" />
bla bla</div>

O código CSS experimental

img.shade{
   width: 37ex;
   height: 9em;
/* specify the dimension of the image */
   display: block;
   position: absolute;
   z-index: -1;
/* force the image to show below the content */
   right: -3ex;
   bottom: -1em;
}

div.shade{
   width: 30ex;
   height: 6em;
/* specify the dimension of the content, slightly smaller than the image */
   position: relative;
   z-index: 1;
/* force the content to show above the image */
   background-color: #fff;
   border: 1px solid #000;
   padding: 1em 2ex;
   margin-right: 6ex;
   margin-bottom: 3em;
}

Temos três desvantagens neste método

1. Como a imagem se estica, pode talvez, não ficar muito bonito.
2. Em Mozilla Firefox a imagem às vezes desaparece (pode ser recuperada refrescando ou deslocando a página). No Internet Explorer não se mostra bem o efeito, pelo menos na versão 6.
3. O conteúdo não pode flutuar (não podemos utilizar o atributo float)

Podemos ver este exemplo em funcionamento em uma página a parte.

Um momento. Como faríamos um texto com sombreado?

Se utilizar um navegador baseado em Gecko, você poderá visualizar outro efeito interessante para realizar sombreado de textos sem utilizar imagens e "redimensionável" simplesmente mudando o tamanho do texto ou as fontes que usa o navegador (com o menu view>text size > increase / Decrease).

O código HTML seria o seguinte:

<span id="text">Texto sombreado</span>

O código CSS

#text{
   font-size: 3em; /* optional. just to increase the font size. */
   display: block;
   line-height: 1em;
   color: #666; /* shadow color */
   background-color: transparent;
   white-space: nowrap; /* wrapping breaks the effect */
}

#text:before,
#text:after{
   content: "Texto sombreado"; /* O mesmo texto que queremos mostrar sombreado */
   display: block;
}

#text:before{
   margin-bottom: -1.05em;
   margin-left: 0.1ex;
   color: #ccc; /* shadow color */
   background-color: transparent;
}

#text:after{
   margin-top: -1.05em;
   margin-left: -0.1ex;
   color: #fff; /* text color */
   background-color: transparent;
}

Este efeito pode ser útil por agora. Entretanto, as especificações de CSS2 incluem uma propriedade CSS chamada text-shadow, que serve para definir um efeito de sombra a um texto. Entretanto, a maioria dos navegadores ainda não suporta esta propriedade.

Interessantes recursos sobre este tema:

• Simple CSS drop shadows http://www.saila.com/usage/shadow/
• A List Apart: CSS Drop Shadows http://alistapart.com/articles/cssdropshadows/ de Sergio Villarreal (revisão do artigo Easy CSS drop shadows http://1976design.com/blog/archive/2003/11/14/shadows/ de Dunstan Orchard)
• CSS Drop Shadows II: Fuzzy Shadows http://alistapart.com/articles/cssdrop2/ by Sergio Villarreal

Este artigo é uma tradução do inglês. O original está em: http://www.phoenity.com/newtedge/drop_shadow/