Varias sombras de texto usando apenas CSS para você usar

Varias sombras de texto usando apenas CSS para você usar

Neste artigo vamos ver vários exemplos de sombras de texto usando apenas CSS, o qual você pode copiar e colar em seu próprio trabalho. 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 funciona bem em todos os navegadores 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 de texto usando apenas CSS:

RESULTADO / CSS
BÁSICA
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
DUPLA
text-shadow: 1px 1px 0px #fff, 
3px 3px 0px rgba(0,0,0,0.15);
DISTANTE
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);
DESFOCADO
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);
BORDA
text-shadow: 1px 0px 0px red, 
-1px 0px 0px red, 
0px 1px 0px red, 
0px -1px 0px red;
TEXTO 3D
Por Mark Dotto’s
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);
INTERNA
por Gordon Hall
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;

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.

Deixar um comentário

captcha