CSS: adicionar o efeito de sombra a um Div

efeito-de-sombra-a-um-div

 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.

Sou eng. informático. Faço aplicações/sites web. Gosto de ensinar.

Comente pelo Facebook:

4 Responses to CSS: adicionar o efeito de sombra a um Div

  1. Ed diz:

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

    Obrigado.

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

    (alpha é a transparência)

  3. Crelisvaldo diz:

    Obrigado por me explicar a propriedades do -webkit!

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Pode usar estas etiquetas HTML e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>