:Criando CSS efeitos 3D em textos

Publicado em: 07/11/2003

Desatualizado. Ver uma versão atualizada deste tutorial

Introdução

Com CSS voce pode obter variados efeitos nos textos de sua página. Apresento a seguir alguns exemplos com a finalidade de mostrar as definições básicas para este processo. As possibilidades são ilimitadas, bastando um pouco de criatividade para se obter efeitos bastante interessantes e decorativos.

Para cada efeito apresento o resultado visual final do efeito e logo a seguir a regra CSS para obtê-lo.

A técnica básica para obtenção do efeito consiste em se fazer line-height entre os textos e as sombras iguais a zero e a seguir declarar margens negativas embaixo e em cima dos textos adjacentes e margens laterais.

Você terá que ir fazendo experiências com o valor das margens até obter o efeito desejado.

Vamos a eles:

Efeito #1

EFEITOS 3D EM TEXTOS

EFEITOS 3D EM TEXTOS

p.texto1 {
	color:#f00;
	font: 25px "arial black", Helvetica, sans-serif;
	line-height:0;
	margin-top:5px;
}
p.sombra11  {
	color:#000;
	font: 25px "arial black", Helvetica, sans-serif;
	line-height:0;
	margin-left:5px;
	margin-bottom:5px;
}

Efeito #2

EFEITOS 3D EM TEXTOS

EFEITOS 3D EM TEXTOS

EFEITOS 3D EM TEXTOS

p.texto2 {
	color:#036;
	font: 25px "arial black", Helvetica, sans-serif;
	line-height:0;
	margin-top:5px;
}
p.sombra21  {
	color:#999;
	font: 25px "arial black", Helvetica, sans-serif;
	line-height:0;
	margin-top:5px;
	margin-bottom:5px;
	margin-left:5px;
}
p.sombra22  {
	color:#ccc;
	font: 25px "arial black", Helvetica, sans-serif;
	line-height:0;
	margin-bottom:5px;
	margin-left:10px;
}

Efeito #3

EFEITOS 3D EM TEXTOS

EFEITOS 3D EM TEXTOS

EFEITOS 3D EM TEXTOS

EFEITOS 3D EM TEXTOS

p.texto3 {
	color:#999;
	font: 25px "arial black", Helvetica, sans-serif;
	line-height:0;
	border: 4px double #999;
	border-top: 0px solid;
	padding-bottom:15px;
	margin-top:5px;
}
p.sombra31  {
	color:#ccc;
	font: 25px "arial black", Helvetica, sans-serif;
	line-height:0;
	margin-left:10px;
	margin-bottom:5px;
	margin-top:5px;
}
p.sombra32  {
	color:#dcdcdc;
	font: 25px "arial black", Helvetica, sans-serif;
	line-height:0;
	margin-left:20px;
	margin-bottom:5px; 
	margin-top:5px;
}
p.sombra33  {
	color:#e8e8e8;
	font: 25px "arial black", Helvetica, sans-serif;
	line-height:0;
	margin-left:30px;
	margin-bottom:5px; 
	border: 1px solid #999;
	border-bottom: 0px solid;
	padding-top:15px;
}

Efeito #4

EFEITOS 3D EM TEXTOS

EFEITOS 3D EM TEXTOS

EFEITOS 3D EM TEXTOS

p.texto4 {
	color:#f00;
	font: 25px "arial black", Helvetica, sans-serif;
	line-height:0;
	margin-top:10px;
}
p.sombra41  {
	color:#fbf;
	font: 25px "arial black", Helvetica, sans-serif;
	line-height:0;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:15px;
	letter-spacing:-2px;
}
p.sombra42  {
	color:#ffe1ff;
	font: 25px "arial black", Helvetica, sans-serif;
	line-height:0;
	margin-bottom:10px;
	margin-left:30px;
	letter-spacing:-4px;
}

Criei uma página mostrando os efeitos deste tutorial, para você copiar e colar o código fonte salvando no seu HD para estudos.