Efeito sombra com CSS3Olá, 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.

Preview

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:

Fig. 01: Atributos da propriedade text-shadow

Fig. 01: Atributos da propriedade text-shadow

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:

< !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>

/***************************************
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

Fig. 02: Resultado final

  Download do código-fonte do tutorial
(1,0 KiB, 15 downloads)
Você precisa ser um usuário registrado e fazer o LOGIN DE ACESSO para completar download deste arquivo. CADASTRE-SE! É de graça ;)

Então, ficamos por aqui, pessoal.

Grande abraço.

CarlosHPS Webdesigner 8)

Blog Widget by LinkWithin