Efeito de texto 3D com CSS

Vamos ver como isso é feitoNós vamos precisar:

• Conhecimento básico de HTML e CSS
• Um editor de código
• Nosso navegador

Passo 1

Vamos criar uma pasta em nosso site local para salvar os arquivos que vamos precisar, vou chamá-la de "text_3d" dentro dela outra chamada css
PROLONGAR
PROLONGAR

Passo 2

Iremos para o editor de código e criaremos um novo arquivo index.html que salvaremos na raiz da pasta “3d_text” que criamos na etapa anterior, na qual escreveremos nossa estrutura html básica e adicionaremos a referência a um arquivo css chamado "style. ccs" que criaremos mais tarde.
Código HTML

etapa 3

Vamos adicionar uma linha dentro do corpo na qual colocaremos um rótulo

ao qual atribuiremos a classe "3d-text" que criaremos no arquivo .css, colocarei qualquer texto dentro deste rótulo para teste.

Efeito de texto 3-D

Se o virmos no navegador neste momento não veremos grandes mudanças, apenas um texto normal e atual, para que possamos ter uma aparência 3D é necessário definir algumas propriedades através do css. Vá em frente.
PROLONGAR

Passo 4

Em nosso editor de código, criaremos um novo arquivo .css que chamarei de style.css. Neste, colocaremos as propriedades para que nosso texto tenha o efeito 3D que desejamos obter.

Etapa 5

Começaremos a editar nosso css primeiro definiremos o tamanho de nosso corpo, para isso lhe daremos uma posição absoluta com largura e altura de 100%.

 corpo {posição: absoluto; largura: 100%; altura: 100%} 

Etapa 6

Vamos escrever em nosso .ccs as propriedades da classe "3d-text" que comentamos no passo 3. Começaremos definindo a fonte, gosto particularmente de usar a fonte "Helvetica Neue", claro que você pode use-o com a fonte desejada. Neste caso, definirei o tamanho da fonte para cerca de 80px; negrito ou negrito … E desta vez vou deixar em branco. Se o virmos no nosso navegador notaremos que o texto desapareceu, é porque o colocamos a branco e o fundo dos navegadores também é branco …

 corpo {posição: absoluto; largura: 100%; altura: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; tamanho da fonte: 80px; intensidade da fonte: Negrito; cor: #fff; } 

Veremos no navegador que o texto desaparecerá
PROLONGAR

Etapa 7

Vimos que na etapa anterior o texto desapareceu, agora precisamos que ele apareça e com efeito 3D. Para isso, precisamos apenas adicionar uma sombra ao nosso texto usando a propriedade text-shadow, como segue.

 corpo {posição: absoluto; largura: 100%; altura: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; tamanho da fonte: 80px; intensidade da fonte: Negrito; cor: #fff; sombra do texto: 0 1px 0 #ccc; } 

PROLONGAR

Vemos que conseguimos um leve efeito de sombreamento, mas não é suficiente para torná-lo 3D, felizmente css nos permite combinar várias sombras dentro da propriedade text-shadow separadas por uma vírgula, vamos aproveitar isso para colocar vários sombras a uma distância diferente do nosso texto e com diferentes tons de cor de um mais escuro para um mais claro, a fim de criar o efeito, mas também devemos combinar essas sombras usando cores rgba e transparências para dar aquele efeito de difusão no final do sombreamento.
Desta forma, nosso código css ficaria assim.

 corpo {posição: absoluto; largura: 100%; altura: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; tamanho da fonte: 80px; intensidade da fonte: Negrito; cor: #fff; sombra do texto: 0 1px 0 #ccc, 0 2px 0 # c9c9c9, 0 3px 0 #bbb, 0 4px 0 # b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba (0, 0, 0, .1), 0 0 5px rgba (0, 0, 0, .1), 0 1px 3px rgba (0, 0, 0, .3), 0 3px 5px rgba (0, 0, 0, .2), 0 5px 10px rgba (0 , 0, 0, .25), 0 10px 10px rgba (0, 0, 0, .2), 0 20px 20px rgba (0, 0, 0, .15); } 

E o resultado do efeito seria o seguinte …
PROLONGAR
Isso é tudo por enquanto aqui está um .zip com os arquivos, qualquer dúvida ou sugestão pode ser enviada através dos comentários, saudações …
text_3d20150917130359.zip 694 bytes 217 downloadsGostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo