WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação e de sites

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

TEXT-SHADOW

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
Postado por: Arthur Di Polito
Criação e Diagramação 

 

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]