Fica a dica ! Professor Marcos Ammon
Acompanhe o tutorial desenvolvido pelo professor Marcos Ammon e aprenda a criar texto em 3D utilizando CSS..
Texto em 3d.
Com o padrão CSS, além
de formatar um texto fora da marcação html (evitando a
poluição de código
com as famosas tags ) ja é possível fazer formatações
que os editores de
texto mais avançados tem. Um deles é a sombra.
Aplicar uma sombra de
texto em css é simples e feita através da propriedade
“text-shadow”.
Considere a seguinte estrutura html:
Considere a seguinte estrutura html:
<html>
<head>
<title>Texto em 3d</title>
<style>
body {
background: gray;
font-family:Arial;
}
h1 {
color:white;
}
</style>
</head>
<body>
<h1>Digital Max</h1>
</body>
</html>
Até aqui, nada
incomum, temos um site com um titulo simples, sendo que o seu fundo
contém a cor cinza.
Observe o que acontece
quando aplicamos text-shadow:
text-shadow: 1px 2px
3px white;
Observe que o texto ficou contornado, dando a impressão de alto relevo, isso acontece por que há uma sombra, um deslocamento nas extremidades do texto.
Sabendo então da
existência dessa propriedade, vamos entender os valores da
declaração
:. 1px deslocamento da sombra para a direita (quando o valor é maior que zero)
:. 1px deslocamento da sombra para a direita (quando o valor é maior que zero)
ou para a esquerda
(quando o valor é menor que zero, por exemplo -2px)
:. 2px deslocamento da
sombra para baixo.
:. 3px raio de desfoque.
O ultimo valor é a cor que pode ser um valor hexadecimal, rgba ou o seu próprio nome.
Por ter essa variedade de escolhas e por termos a possibilidade de aplicarmos varias sombras
:. 3px raio de desfoque.
O ultimo valor é a cor que pode ser um valor hexadecimal, rgba ou o seu próprio nome.
Por ter essa variedade de escolhas e por termos a possibilidade de aplicarmos varias sombras
num mesmo texto,
podemos utilizar de um truque simples: Usar várias sombras
deslocadas em posições diferentes.
Text-shadow: 0 1px 0 #e3e3e3,
Text-shadow: 0 1px 0 #e3e3e3,
0 3px 0 #c9c9c9,
0 5px 0 #b8b8b8,
0 7px 0 #ababab,
0 9px 0 #a1a1a1,
0 11px 0 #969696,
0 0 10px rgba(0,0,0,0.15),
0 7px 10px rgba(0,0,0,0.1),
0 11px 10px rgba(0,0,0,0.45);
O efeito desejado você pode ver abaixo:
Dois detalhes! Perceba que utilizamos cores diferentes (nas ultimas três sombras aplicamos niveis de transparências diferentes).
0 5px 0 #b8b8b8,
0 7px 0 #ababab,
0 9px 0 #a1a1a1,
0 11px 0 #969696,
0 0 10px rgba(0,0,0,0.15),
0 7px 10px rgba(0,0,0,0.1),
0 11px 10px rgba(0,0,0,0.45);
O efeito desejado você pode ver abaixo:
Dois detalhes! Perceba que utilizamos cores diferentes (nas ultimas três sombras aplicamos niveis de transparências diferentes).
E
as cores também foram alternando dando contraste ao nosso texto 3d.
Isso
demonstra a força da CSS para desenvolvimento de websites.
text-shadow aplicado:
<html> <head> <title>Texto em 3d</title> <style> body { background: gray; } h1 { color:white; text-shadow: 0 1px 0 #e3e3e3, 0 3px 0 #c9c9c9, 0 5px 0 #b8b8b8, 0 7px 0 #ababab, 0 9px 0 #a1a1a1, 0 11px 0 #969696, 0 0 10px rgba(0,0,0,0.15), 0 7px 10px rgba(0,0,0,0.1), 0 11px 10px rgba(0,0,0,0.45); } </style> </head> <body> <h1>Digital Max</h1> </body> </html>
