Desenvolvimento - CSS

Text-shadow CSS3 - Como aplicar sombras em elementos HTML

Neste artigo veremos como aplicar text-shadow em css3, permitindo que seja aplicado efeitos de sombras em elementos HTML.

por Ricardo Arrigoni



Olá pessoal, vamos falar um pouco sobre as novas propriedades das CSS3?

Text-shadow

O text-shadow é um recurso muito legal que foi adicionado junto com outras inúmeras novidades do CSS3, ele é responsável por criar o efeito de sombras nos textos sem precisar de utilizar nenhuma imagem para isso, deixando seu site mais leve e com recursos visuais mais bonitos, podendo proporcionar uma experiência legal aos usuários.

Obs.: Infelizmente os navegadores mais antigos e o Internet Explorer não possuem suporte para essa funcionalidade.

Assim como em toda declaração css, devemos aplicar o efeito sobre algum efeito HTML.

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

Listagem 1 : Exemplo de Text-shadow

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
    <title>Aplicando Text-Shadow</title>
<style type="text/css">
h1{
	color: #f00;
	text-shadow: #000 2px 3px 2px;
	}
</style>
</head>
<body>
<h1>text-shadow</h1>
</body>
</html>

Utilizando o código acima, nosso exemplo deverá ficar como o exibido na figura 1:

text-shadow em css3

Figura 1: Text-Shadow CSS3

Aplicamos uma cor vemelha ao texto e uma borda na cor preta, utilizamos valores contidos na tabela de cores em HTML. Na mesma declaração devemos dizer o posicionamento da sombra sobre o elemento em que ela está sendo aplicada. A ordem de declaração do posicionamento é:

  • Distância horizontal
  • Distância vertical
  • Raio

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.

Também podemos aplicar sombras de diferentes cores, fazendo de acordo com o que você achar melhor. Vamos ver outro exemplo?

Listagem 2: Text-shadow com diferentes cores

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
    <title>Aplicando Text-Shadow</title>
<style type="text/css">
h1{
	color: #000;
	text-shadow: #fffc00 2px 3px 2px;
	}
</style>
</head>
<body>
<h1>text-shadow</h1>
</body>
</html>

Nesse segundo exemplo fizemos uma sombra de cor amarela em um texto de cor preta, você pode ficar a vontade em utilizar qualquer uma das cores da tabela.

Sombra amarela

Figura 2: Sombra amarela

Espero que tenha ficado claro como usar o text-shadow, um recurso muito interessante para ser usado em seus websites, mas sempre lembrando que navegadores antigos e o Internet Explorer não possuem suporte para ele.

Um abraço e até a próxima.

Ricardo Arrigoni

Ricardo Arrigoni - Desenvolvedor Front-End, Analista SEO, Atuo na área de Webdesign há mais de 4 anos. Para trabalhos freelancers visite meu portfólio: www.ricardoarrigoni.com.br ou se preferir me mande um e-mail.