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 ArrigoniOlá 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:
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.
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 - Especialista em SEO com mais de 7 anos de experiência. Para consultorias em SEO visite meu site: www.ricardoarrigoni.com.
