Textos com sombras em CSS

Adicionar sombras a textos em CSS é uma técnica eficaz para dar profundidade e destaque ao seu design. A propriedade text-shadow permite que você crie efeitos visuais impressionantes, transformando textos comuns em elementos atraentes e chamativos. Neste post, vamos explorar Textos com sombras em CSS, como utilizar text-shadow, suas propriedades e dar dicas sobre como aplicá-las de maneira eficaz.

O que é text-shadow?

A propriedade text-shadow aplica uma sombra ao texto, que pode ser personalizada em termos de cor, posição e desfoque. Sua sintaxe básica é:

text-shadow: <deslocamento horizontal> <deslocamento vertical> <desfoque> <cor>;

Deslocamento horizontal: Define a distância da sombra em relação ao texto na horizontal (pode ser positivo ou negativo).
Deslocamento vertical: Define a distância da sombra na vertical (também pode ser positivo ou negativo).
Desfoque: Especifica o quanto a sombra deve ser desfocada (quanto maior o número, mais suave será a sombra).
Cor: Define a cor da sombra; pode ser especificada em formatos como HEX, RGB ou nome de cor.

Exemplo prático

Vamos criar um título com uma sombra sutil:

h1 {
    font-size: 48px;
    color: #333;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

Neste exemplo, o texto do título h1 aparece com uma sombra que se desloca 2 pixels para a direita e para baixo, com um desfoque de 5 pixels e uma cor preta semitransparente. Esse efeito faz com que o texto pareça mais elevado e impactante.

Dicas para utilização

Contraste é fundamental: Ao adicionar sombras, assegure-se de que elas não diminuam a legibilidade do texto. Sombra muito escura em um fundo escuro pode tornar a leitura difícil.
Menos é mais: Use sombras com moderação. Sombras muito pesadas podem sobrecarregar o design e torná-lo confuso.
Combine com outros estilos: Experimente usar sombras em conjunto com outras propriedades de CSS, como font-weight ou letter-spacing, para criar um estilo harmonioso.
Teste em diferentes dispositivos: O efeito de sombra pode parecer diferente em telas de tamanhos variados, então teste para garantir que o design funcione bem em todas as plataformas.

Exemplos criativos

Aqui estão algumas maneiras de usar text-shadow de forma criativa:

Sombra dupla: Você pode adicionar várias sombras ao mesmo texto, separando-as por vírgulas:

h2 {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), 2px 2px 5px rgba(0, 0, 0, 0.4);
}

Efeito Neon: Para um efeito de texto neon, use cores brilhantes e um desfoque maior:

.neon {
    color: #39ff14;
    text-shadow: 0 0 5px #39ff14, 0 0 10px #39ff14, 0 0 20px #39ff14;
}

Outro exemplo prático

Código HTML/XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<head>
  <html xmlns="estilo.css" rel="stylesheet" type="text/css" />
  <title>CSS - Dicas</title>
</head>
<body>
   <h1>Exemplo de links></h1>
   </a href="" class="ex01">Exemplo 01</a><br /><br />
   </a href="" class="ex02">Exemplo 02</a><br /><br />
   </a href="" class="ex03">Exemplo 03</a><br /><br />
 </body>
</html>

Código CSS (arquivo estilo.css):

       .texto
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 20pt;
		color: #000000;
		line-height: center;
		margin-top: 6px
	}
    
	/* estilos de sombras */
	.smb1a
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 24pt;
		font-weight: bold;
		color: #bcbcbc;
		line-height: 0;
		margin-top: 8px;
		margin-left: 8px;
		margin-bottom: 8px;}

	.smb2a
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 24pt;
		font-weight: bold;
		color: #e1e1e1;
		line-height: 0;
		margin-top: 8px;
		margin-left: 16px;
		margin-bottom: 8px;
	}
 
	.smb1b
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 24pt;
		font-weight: bold;
		color: #bcbcbc;
		line-height: 0;
		margin-top: 8px;
		margin-left: -8px;
		margin-bottom: 8px;
	} 

	.smb2b
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 24pt;
		font-weight: bold;
		color: #e1e1e1;
		line-height: 0;
		margin-left: -16px;
		margin-bottom: 8px;
	}
 
	h1
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10pt;
		color: #000000;
		width: 50%;
		margin-top: 2px;
		margin-bottom: 2px;
		border-top: 1px solid #000000;
		border-bottom: 1px dashed #000000;
	}

O uso de sombras em textos pode elevar significativamente a estética de seus projetos web.

Com a propriedade text-shadow, você tem a flexibilidade de criar efeitos variados que podem se adequar a qualquer estilo de design. Experimente diferentes combinações e encontre o que melhor se adapta à sua visão!

QUER SER UM PROGRAMADOR FULL-STACK E DOMINAR AS PRINCIPAIS TECNOLOGIAS DO MERCADO?
Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.
Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!

CLIQUE NA IMAGEM ABAIXO E CONFIRA MAIS DETALHES:

Link do curso: https://go.hotmart.com/X68198266R

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

O que é text-shadow?

Exemplo prático

Dicas para utilização

Exemplos criativos

Outro exemplo prático

Deixe um comentário Cancelar resposta