Curso de HTML5 e CSS3 Responsivo Aula 14 Adicionando sombra em elementos e textos

Nessa vídeo aula vamos conhecer e aplicar duas propriedades interessantes do CSS3. Temos a possibilidade de inserirmos sombras em textos e em elementos. As propriedades têm nomes diferentes, mas a mesma sintaxe

box-shadow: 2px 5px 10px #ccc;

text-shadow: 2px 5px 10px #ccc;

No exemplo acima, o primeiro valor 2px é a distância horizontal da sombra em relação ao elemento, o segundo valor 5px é a distância vertical da sombra em relação ao elemento e o terceiro valor 10px é o raio da sombra (efeito blur) e #ccc é a cor da sombra.

box-shadow destina-se a aplicação de sombras em elementos e text-shadow apenas para aplicação de sombras em textos

  • Dica: como qualquer outra declaração em CSS, podemos utilizar qualquer unidade de medida para definir a distância e o raio da sombra, não apenas pixels

Múltiplas sombras em bordas

Também é possível adicionar múltiplas sombras a um elemento usando box-shadow ou a textos utilizando text-shadow, bastando, para isso, separar as declarações com vírgula. As sombras se sobrepõem na ordem em que foram declaradas, mas nunca se sobrepõem ao elemento original.

box-shadow: 2px 5px 10px red,-2px -5px 10px blue;

text-shadow: 2px 5px 10px red,-2px -5px 10px blue;

Código final desenvolvido na vídeo aula.

.sombra {
                box-shadow: 2px 5px 10px #ccc;
                -webkit-box-shadow:  2px 5px 10px #ccc;
                -moz-box-shadow:  2px 5px 10px #ccc;
                border: 1px solid #ddd
}

 



Hospedagem Profissional de Sites