Como Criar Efeito Sombra com CSS
Olá, pessoal
Neste simples tutorial veremos como criar um efeito de sombreamento (text-shadow) para textos utilizando apenas o CSS em sua 3ª versão, ou seja, CSS3.
De acordo com o “mago” do CSS, o sr. “Maujor”, em seu artigo CSS3 – Sombras em textos, as Recomendações do W3C para as CSS2 lançadas em 1998 já previam a propriedade text-shadow destinada a obter um efeito de sombreamento em textos.
O ganho que os desenvolvedores para a web têm com mais esta propriedade do CSS3 é mensurável. Basta compararmos um efeito com sombra com uma imagem e um arquivo em folha de estilo.
Objetivo
Aplicar efeito de sombra utilizando o atributo do CSS3 text-shadow.
Pré-Requisitos
Familiaridade com o CSS
Utilização de navegadores atualizados (Firefox 3+, IE 7+, Safari 3+)
Conteúdo
1º Passo – Conhecendo a Propriedade text-shadow
A estrutura da propriedade do text-shadow é a seguinte:
O efeito blur e a sombra não são requisitos obrigatórios à propriedade. No caso da sombra, caso a gente omita, ela será gerada com a mesma cor definida para o texto.
2º Passo – Colocando em Prática
Para efeito de teste, façamos a seguinte página html e css, respectivamente:
Código HTML
< !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>CarlosHPS BLOG - Efeito text-shadow com CSS 3</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>CarlosHPS BLOG</h1>
<h2>Como Criar Efeito Sombra com CSS</h2>
<h3>www.carloshps.com.br/blog</h3>
</body>
</html>
Código CSS
/***************************************
Desenvolvido por: CarlosHPS Webdesigner
[www.carloshps.com.br/blog]
para o tutorial "Como Criar Efeito Sombra com CSS"
Todos os direitos reservados
Versão 1.0 | 15/03/2010
Atualizado em:
***************************************/
body {
background-color: #474747;
}
h1, h2, h3 {
font-family: Tahoma, Helvetica, Arial, Sans-Serif;
font-weight: bold;
text-align: center;
}
h1 {
color: #222;
font-size: 35px;
text-shadow: 0px 2px 3px #555;
}
h2 {
color: #fff;
font-size: 50px;
text-shadow: 2px 1px 1px #222;
}
h3 {
color: #666;
font-size: 40px;
text-shadow: 0px 3px 8px #2a2a2a;
}
E como resultado, teremos:
-
Fig. 02: Resultado final
Então, ficamos por aqui, pessoal.
Grande abraço.
CarlosHPS Webdesigner 
Autor: CarlosHPS Webdesigner – Colunista do Portal MXSTUDIO
Não deixem de me fazer uma visita:
- BLOG: www.carloshps.com.br/blog
- CURSOS ONLINE: www.carloshps.com.br/cursos
- PORTFÓLIO: www.carloshps.com.br/
Escrito por CarlosHPS Webdesigner
on março 15, 2010. Arquivado em CSS.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
olá carlos, muito legal, obrigado pela dica
marcia