Categorias
CSS Programação Tutoriais

Exemplos de sombras em texto apenas com CSS

Neste artigo vamos ver vários exemplos de sombras em texto apenas com CSS, que você pode copiar e colar em seus trabalhos…

A propriedade “text-shadow” é uma ferramenta particularmente divertida que o CSS lhe dá para jogar com seu tipo é sombra de texto, o que parece bastante simples no início, mas pode ser usado para criar alguns efeitos notáveis com um pouco de engenhosidade e criatividade.

A propriedade “text-shadow” é super fácil de trabalhar e pode ser aplicado a qualquer elemento que tenha texto, lógico, e é aceite pela grande maioria dos browsers modernos. No entanto, o uso de ferramentas como o Modernizr irá ajudá-lo a tirar os efeitos avançados do CSS3, mesmo em navegadores mais antigos, se você precisar de um suporte de retorno.

A sintaxe para criar uma simples sombra de texto é muito simples você tem quatro variáveis para trabalhar, as duas primeiras definem a posição da sua sombra, a terceira define a quantidade de borrão (blur) e a quarta a cor da sombra.

Contudo, usando vírgulas como separador, você pode empilhar varias sombras, desta forma vai aumentar dramaticamente o interesse e o realismo do efeito. Você vai poder verificar isso a seguir, nos vários exemplos de sombras de texto usando apenas CSS que aqui apresento.

Exemplos de sombras em texto apenas com CSS:

BÁSICA – CSS / RESULTADO

text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

BÁSICA

DUPLA – CSS / RESULTADO

text-shadow: 1px 1px 0px #fff,
3px 3px 0px rgba(0,0,0,0.15);

DUPLA

DISTANTE – CSS / RESULTADO

text-shadow: 0px 5px 10px #b2a98f,
0px 10px 10px rgba(0,0,0,0.15),
0px 15px 15px rgba(0,0,0,0.1),
0px 20px 20px rgba(0,0,0,0.1);

DISTANTE

DESFOCADO – CSS / RESULTADO

text-shadow: 0px 0px 1px rgba(0,0,0,0.4),
0px 0px 13px rgba(0,0,0,0.1),
0px 0px 23px rgba(0,0,0,0.1);

DESFOCADO

BORDA – CSS / RESULTADO

text-shadow: 1px 0px 0px red, 
-1px 0px 0px red, 
0px 1px 0px red, 
0px -1px 0px red;

BORDA

TEXTO 3D (Por Mark Dotto’s) – CSS / RESULTADO

text-shadow: 0 1px 0 #cccccc, 
0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 
0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 
0 6px 1px rgba(0, 0, 0, 0.1), 
0 0 5px rgba(0, 0, 0, 0.1), 
0 1px 3px rgba(0, 0, 0, 0.3), 
0 3px 5px rgba(0, 0, 0, 0.2), 
0 5px 10px rgba(0, 0, 0, 0.25), 
0 10px 10px rgba(0, 0, 0, 0.2), 
0 20px 20px rgba(0, 0, 0, 0.15);

TEXTO 3D

INTERNA (Por Gordon Hall) – CSS / RESULTADO

background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
color: transparent;

INTERNA

Conclusão: Criar sombras de texto usando apenas CSS, e muito simples. Como a maioria dos efeitos CSS, as sombras de texto são extremamente simples de implementar de forma básica, mas podem assumir uma variedade de formas diferentes, se colocarmos algum trabalho nelas.

Simples! Gostou da ideia? Já usa esta propriedade do CSS3? Comente! Não se esqueça de Recomendar e Compartilhar!



Deixe um comentário

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