Acompanhe o tutorial desenvolvido pelo professor Marcos Ammon e aprenda a criar texto em 3D utilizando CSS.. Texto em 3d. Com o ...

Fica a dica ! Professor Marcos Ammon

09:35 Digital Max - Nova Iguaçu 0 Comments

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:
 
<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)
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
num mesmo texto, podemos utilizar de um truque simples: Usar várias sombras deslocadas em posições diferentes.

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).

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>