Artigos HTML e CSS Text-shadow CSS3: Inserindo sombras em textos

Olá pessoal, no artigo de hoje irei mostrar um pouco sobre o uso de sombras nos textos usando CSS 3.

Este é um recurso bem simples que foi incorporado ao css 3 e que é bastante interessante para dar aquele efeito sombreado ao texto.

Text-shadow

O text-shadow é a propriedade responsável por adicionar sombra a um texto por meio do CSS3. Como poderemos ver na listagem 1, a sua declaração é bem simples, no nosso exemplo iremos dar uma sombra preta a um elemento <h1> cinza.

Vamos criar um documento HTML e adicionar um elemento <h1>, nele iremos aplicar o efeito text-shadow, como mostra a listagem a seguir:

Listagem 1 : Aplicando Text-shadow


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aplicando Text-Shadow</title>
<style type="text/css">
h1{
	text-shadow: #000 2px 3px 2px;
	}
</style>
</head>
<body>
<h1>text-shadow</h1>
</body>
</html>

Com esse efeito, nosso exemplo deverá ficar da seguinte forma:

text-shadow

No nosso exemplo, #000 é a cor da sombra, o primeiro valor (2px) é a distância horizontal da sombra em relação ao elemento, o segundo valor (3px) é a distância vertical da sombra em relação ao elemento e o terceiro valor (2px) é o raio da sombra (efeito blur).

Como em qualquer outra declaração em CSS, podemos utilizar qualquer unidade de medida para definir a distância e o raio da sombra, não apenas pixels, permitindo ao desenvolvedor utilizar a que mais agradar e mais atender às suas necessidades.

Um Abraço e até o próximo artigo

Ricardo Arrigoni - Desenvolvedor Front-end e Analista SEO