CSS: adicionar o efeito de sombra a um Div

Como fazer com que uma caixa (Div) CSS tenha sombra? Vamos aprender quais as regras CSS necessárias para este agradável efeito.
Autor:  (Website)
Categorias: CSS, Dicas
Sugestões:

sombras CSS: adicionar o efeito de sombra a um Div

1º Passo

Uma sombra é definida com 4 parâmetros (por ordem):

  1. Sombra horizontal (valor negativo >  sombra por cima; valor positivo > sombra por baixo)
  2. Sombra vertical (valor negativo >  sombra à esquerda; valor positivo > sombra à direita)
  3. Quantidade de “blur”, isto é de falta de nitidez da sombra
  4. Cor da sombra

Sabendo isso, temos de criar uma classe (dentro de <head>) chamada “shadow” com os valores pretendidos (e repeti-los por cada linha).

<style>
.shadow {
	box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);
}
</style>
O Internet Explorer, mais uma vez, não suporta este efeito.

2º Passo

Aplicar a classe ao elemento pretendido:

 <div class="shadow">
     Isto é o meu Div que tem sombra!
 </div>

Mais info aqui.

Para ajuda profissional (paga), contacte-nos.


Receber mais truques e dicas por email:

Comentar


  1. davi diz:
    22 Jan 11 às 03:48

    teste

    Responder
  2. Ed diz:
    27 Out 11 às 13:07

    Olá colega, gostei muito do tutorial. Mas fiquei com dúvida no atributo “rgba” dentro das tags. Do que se trata ?

    Obrigado.

    Responder
  3. Luís Soares diz:
    27 Out 11 às 13:40

    esse representa a cor da sombra (r- red, g-green, b- blue, a- alpha)

    (alpha é a transparência)

    Responder