Efeito de sombra com CSS

[helldanger1]

Veremos vários métodos para realizar um efeito de sombreado utilizando folhas de estilo em cascata.
Por Lim Chee Aun



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.

 

[helldanger1]

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.

 

[helldanger1]

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;

 

[helldanger1]

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)


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.

 

[helldanger1]

Interessantes recursos sobre este tema:


•Simple CSS drop shadows http://www.saila.com/usage/shadow/
•A List Apart: CSS Drop Shadows A List Apart: Articles: CSS Drop Shadows de Sergio Villarreal (revisão do artigo Easy CSS drop shadows Easy CSS drop shadows | Blog | 1976design.com de Dunstan Orchard)
•CSS Drop Shadows II: Fuzzy Shadows A List Apart: Articles: CSS Drop Shadows II: Fuzzy Shadows by Sergio Villarreal
Este artigo é uma tradução do inglês. O original está em: Drop Shadow CSS