Text-shadow CSS3: Inserindo sombras em textos
Nesta dica rápida irei mostrar mais uma propriedade do CSS3, o text-shadow, usado para criar sombras nos textos.
Você não gostou da qualidade deste conteúdo?
(opcional) Você gostaria de comentar o que não lhe agradou?
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:
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
Desenvolvedor Front-End e Coordenador dos sites Linha de Código e MrBool, 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.
2 COMENTÁRIOS
Abs
