Carregando...

Como fazer Texto 3D com CSS

Postado: 4 de novembro de 2022

Como fazer Texto 3D com CSS

Para fazer um texto 3D usaremos propriedade text-shadow do CSS. Veja o conceito da propriedade: A propriedade text-shadow acrescenta sombras ao texto. Ela aceita uma lista de sombras separadas por vírgula que serão aplicados ao texto e ao text-decorations do elemento.

Nesta seção, projetaremos uma estrutura das seguintes tags abaixo. 

Tags: <div> e a tag <p> para inserirmos o texto de descrição.

Essas tags usaremos para criar o Texto 3D com html e css.

Vamos Adicionar o HTML

 <div class="text_container">
   <p class="text text_top">Loop Nerd</p>
   <p class="text text_bottom">Loop Nerd</p>
 </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o Texto com css e html para fazer o efeito 3D.

.bg {

    background-image: radial-gradient(transparent, rgba(4, 4, 4, 0.15));

}


.text_container {
  display: inline-block;
  margin: 25px auto 40px;
}

.text {
  font-family: "Changa One", sans-serif;
  font-size: 140px;
  letter-spacing: 30px;
  line-height: 1;
  margin: 0;
  position: relative;
}

.text_top {
  
  background: linear-gradient(rgb(130, 130, 130), rgb(255, 255, 255));
  background-clip: border-box;
  -webkit-background-clip: text;
  background-clip: text;
  position: absolute;
  z-index: 1;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;

}

.text_bottom {

    text-shadow: 2px 1px rgb(0, 57, 85), 
                 4px 2px rgb(5, 70, 90), 
                 6px 4px rgb(15, 72, 100), 
                 8px 5px rgb(20, 85, 105), 
                 10px 6px rgb(25, 98, 110), 
                 12px 7px rgb(30, 99, 115), 
                 14px 8px rgb(30, 112, 120), 
                 16px 9px black, 
                 18px 10px black, 
                 20px 11px black, 
                 22px 12px black, 
                 24px 13px black, 
                 28px 14px rgba(0, 0, 0, 0.9), 
                 30px 15px rgba(0, 0, 0, 0.7), 
                 32px 16px rgba(0, 0, 0, 0.5), 
                 34px 17px rgba(0, 0, 0, 0.3), 
                 36px 18px rgba(0, 0, 0, 0.1), 
                 40px 20px rgba(0, 0, 0, 0.1);

}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

719 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados