CSS3 permite que você seja criativo e experimente seu design para construir páginas da web bonitas e exclusivas. Uma área do design com a qual CSS permite trabalhar é a tipografia.

Você pode usar o família de fontes e sombra de texto propriedades para criar efeitos simples, mas notáveis. Você já deve saber sobre aplicações básicas de sombra de texto em CSS. No entanto, você pode criar uma ampla variedade de estilos com essas propriedades.

Neste artigo, você aprenderá uma maneira eficaz de criar diferentes efeitos de sombra de texto usando HTML e CSS.

Primeiros passos com HTML e CSS

Você pode copiar e colar esses exemplos de código para obter o efeito de sombra de texto de sua preferência. Comece criando um index.html arquivo e um style.css

index.html

 sombra # 01 


href = " https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel = "folha de estilo"
/>
 sombra # 02 


href = " https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel = "folha de estilo"
/>
 sombra # 03 


href = " https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel = "folha de estilo"
/>
 sombra # 04 


href = " https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel = "folha de estilo"
/>
 sombra # 05 


href = " https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel = "folha de estilo"
/>
 sombra # 06 


href = " https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel = "folha de estilo"
/>
 sombra # 07 


href = " https://fonts.googleapis.com/css2?family=Codystar&display=swap"
rel = "folha de estilo"
/>

style.css

corpo {
transformação de texto: maiúsculas;
altura da linha: 1;
alinhamento de texto: centro;
tamanho da fonte: 5rem;
display: grade;
gap: 4rem;
}

Agora, vamos ver 11 exemplos de sombras de texto para você experimentar.

Relacionado: Como alterar o texto do seu site com a propriedade da família de fontes CSS

Místico

Mystic é um estilo vítreo que dá um efeito legal de transição sem usar o transformar propriedade. É um efeito super simples, mas esteticamente agradável, para um site ousado e voltado para o crescimento.

Saída

HTML

 Shadow # 01 
Místico

CSS

corpo {
cor de fundo: # 5e5555;
}
.mystic {
família de fontes: 'Bowlby One', cursiva;
cor: rgba (255, 255, 255, 0,596);
sombra do texto: 20px 0px 10px rgb (0, 0, 0);
}

Monoton

Este é um efeito de texto divertido usando a fonte ‘Monoton’. Você pode brincar com o texto e a cor da sombra para combinar com as cores primárias do seu site.

Saída

HTML

 Shadow # 02 
Monoton

CSS

.monoton {
família da fonte: 'Monoton', cursiva;
tamanho da fonte: 15rem;
cor: rgb (255, 0, 0);
opacidade: 0,5;
sombra do texto: 0px -78px rgb (255, 196, 0);
}

Bungee

Este é um estilo legal usando a fonte ‘Bungee Shade’. Combinado com um fundo escuro, produz um efeito bruto com uma sensação de suspeita.

Saída

HTML

 sombra # 03 
Bungee

CSS

corpo {
cor de fundo: # 222;
}
.bungee {
família de fontes: 'Bungee Shade', cursiva;
cor: rgb (160, 12, 12);
opacidade: 0,9;
sombra do texto: -18px 18px 0 rgb (66, 45, 45);
}

Radioativo

Você pode usar este efeito para sinais de alerta ou perigo. Ele usa a fonte ‘Rampart One’.

Saída

HTML

 sombra # 04 
Radioativo

CSS

corpo {
cor de fundo: # 27292d;
}
.radioactive {
família de fontes: 'Rampart One', cursiva;
cor: rgb (97, 214, 43);
opacidade: 0,6;
sombra do texto: -18px -18px 20px rgb (87, 255, 9);
}

arrancada

Este efeito de texto corrido usa a fonte ‘Faster One’, o sombra de texto propriedade, e um ::depois depseudo-elemento com o mesmo conteúdo do texto. Isso cria um efeito de "duplicação".

Saída

HTML

 sombra # 05 
arrancada

CSS

corpo {
cor de fundo: # 27292d;
}
.arrancada {
família de fontes: 'Faster One', cursiva;
tamanho da fonte: 10rem;
cor: rgba (255, 0, 242, 0,322);
sombra do texto: -20px -108px 0px rgba (255, 255, 255, 0,445);
espaçamento entre letras: 1rem;
posição: relativa;
}
.sprint:: after {
conteúdo: 'sprint';
posição: absoluta;
topo: 215px;
direita: 300px;
}

Espinhoso

Este horripilante efeito de texto espinhoso usa a fonte ‘Eater’. Você pode tentar mudar o sombra de texto em vez disso, para o canto inferior direito.

Saída

HTML

 sombra # 06 
Espinhoso

CSS

.prickly {
família da fonte: 'Eater', cursiva;
sombra do texto: -18px -18px 2px # 777;
}

Codystar

A sombra do texto pode atuar como um contorno borrado, mas visível, para o texto. Este efeito brilhante faz maravilhas com a fonte ‘Codystar’.

Saída

HTML

 sombra # 06 
Codystar

CSS

.codystar {
família da fonte: 'Codystar', cursiva;
intensidade da fonte: Negrito;
cor: rgb (55, 58, 255);
sombra do texto: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

Reino

Você pode obter uma tipografia confiável com esse efeito de sombra. Usa o ::antes pseudo-elemento e o transformar propriedade para inclinar a sombra.

Saída

HTML

 sombra # 08 
Reino

CSS

corpo {
cor de fundo: # 5e5555;
}
.kingdom {
cor branca;
família da fonte: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
tamanho da fonte: 10rem;
altura da linha: 1;
alinhamento de texto: centro;
}
.kingdom - shadow:: before {
cor: # 000;
content: attr (data-text);
margem superior: 0,7 rem;
posição: absoluta;
transformar: perspectiva (205px) escala rotateX (38deg) (0,84);
índice z: -1;
}

Codificador

Este brilhante e positivo sombra de texto O efeito transmite uma personalidade do site autoconsciente e motivada. Você pode adicioná-lo ao seu site para produzir uma aparência esfumada simples.

Saída

HTML

 sombra # 09 


Comer 

Dormir 

Código 

Repetir

CSS

corpo {
cor de fundo: # 5e5555;
}
div {
família da fonte: Verdana, Geneva, Tahoma, sans-serif;
preenchimento: 40px;
margem: 0px automático;
intensidade da fonte: Negrito;
altura da linha: 5,8 rem;
alinhamento de texto: esquerda;
cor: rgb (94, 94, 94);
} 
.coder-life {
sombra do texto: 5px 5px # ffff00;
filtro: drop-shadow (-10px 10px 20px # fff000);
}

Elegante

Se você adora minimalismo, então este efeito de sombra de texto é um ajuste perfeito. Uma vez que usa um tamanho de fonte grande, reduzimos o espaçamento entre letras e aplicou o sombra de texto propriedade para criar esse efeito.

Saída

HTML

 sombra # 10 


s
h
r
uma
d
d
h
uma

CSS

.elegante {
família da fonte: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
tamanho da fonte: 10rem;
espaçamento entre letras: -1rem;
cor branca;
sombra do texto: -18px 8px 18px # b4bbbb;
}

Brincalhão

O contorno fino e em negrito torna este texto atraente e animado. Você pode brincar com o sombra de texto propriedade sem raio de desfoque em posições diferentes. Sombras de texto se aplicam a todos os caracteres, incluindo entidades HTML, como ♥. Você pode usar um Gráfico de referência de entidade de personagem para explorar mais.

Saída

HTML

 sombra # 11 
A codificação é ♥

CSS

.playful {
família da fonte: 'Baloo Tamma', cursiva;
cor: #fff;
espaçamento entre letras: 0,2 rem;
sombra do texto: -2px -2px 0px # 888,
4px 4px 0px # 888,
7px 7px 0px # 888;
}

Continue fazendo experiências com efeitos de sombra avançados

Sombras de texto são uma maneira fácil e eficaz de aprimorar seu design da web e torná-lo visualmente atraente. Você também pode experimentar diferentes efeitos de sombra. Você pode aprender mais sobre os efeitos de sombra projetada para continuar sua jornada CSS.

Naincy Mourya (15 artigos publicados)

A Naincy é especializada na construção de sites altamente responsivos e estratégia de conteúdo eficiente, juntamente com cópias da web. Ela é redatora freelance de tecnologia que fica de olho nas tendências de tecnologia.

Mais de Naincy Mourya