:: Criando CSS efeitos 3D em textos ::
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.
Última modificação: 2006/08/30 09:23:20 GMT
Criado em: 2003-11-07
Atualizado em: 2005-03-10
