Sombras com CSS3
CSS3 - Aplicar sombras com CSS3
Publicidade
Sombras em textos e objetos com CSS3
Informação:As propriedades box-shadow e text-shadow são muito utilizadas para dar o efeito de sombra para objetos e textos determinando valores para tamanho, cor, blur e deslocamento vertical e horizontal.
Obs: Vale lembrar que essa função CSS3 funciona apenas nos navegadores Internet Explorer 9, Google Chrome, Mozila Firefox (3.1 ou superior) e Safari. Cada um desses navegadores precisará de um prefixo para que funcione, lembrando que esse prefixo será temporário até que o W3C valide os comandos CSS3.
Lista com prefixo de cada navegador
Google Chrome e Safari: -webkit-
Mozilla Firefox: -moz-
Internet Explorer: -ms-
Opera: -o-
BOX-SHADOW
.exemplo1 {
box-shadow: v1 v2 v3 v4;
}
Onde:
- v1: Deslocamento da sombra para a direita (valor positivo) ou para a esquerda (valor negativo);
- v2: Deslocamento da sombra para baixo (valor positivo) ou para cima (valor negativo);
- v3: Raio para um efeito blur na sombra;
- v4: Cor da sombra.
Obs: Os valores 3 e 4 são opcionais.
Abaixo alguns exemplos de utilização do BOX-SHADOW
.exemplo_1 {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}
.exemplo_2 {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}
.exemplo_3 {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}
.exemplo_4 {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
Veja o resultado
Exemplo 1
Exemplo 2
Exemplo 3
Exemplo 4
A propriedade text-shadow se utilizado dos mesmo princípios do box-shadow, apenas diferenciando ao tipo de objeto ao qual se aplica, sendo neste caso, textos.
Abaixo alguns exemplos de utilização do TEXT-SHADOW
.exemplo_1{
font-size: 20px;
color: #339966;
text-shadow: 2px 2px #333;
}
.exemplo_2{
font-size: 20px;
color: #339966;
text-shadow: -2px -2px #333;
}
.exemplo_3{
font-size: 20px;
color: #339966;
text-shadow: -2px -2px 3px #333;
}
.exemplo_4{
font-size: 20px;
color: #339966;
text-shadow: 0 0 3px #333;
}
Veja o resultado
Exemplo 1
Exemplo 2
Exemplo 3
Exemplo 4
Publicidade
Autor: Arthur Di Polito
Criação e Diagramação
Gostou dessa dica?
0 Voto(s)
Criação e Diagramação
