Letra sobre letra

[victormartins]

Bom pessoal, queria saber como fazer que nem a página do blog do twitter ( http://blog.twitter.com/ ), as letras ficam em cima da própria letra, como se fosse uma sombra.

Grato

[Lucas Abranches]

cara tu pode usar o text-shadow , atributo css3

porem alguns navegadores não darão suporte.

ex: .font{font:11px arial; text-shadow: #000 2px 2px;}

Editado Março 25, 2010 por Lucas Abranches

[victormartins]

  Lucas Abranches disse:

cara tu pode usar o text-shadow , atributo css3

porem alguns navegadores não darão suporte.

ex: .font{font:11px arial; text-shadow: #000 2px 2px;}

Esse é o problema, nem todos os browser funcionam com o CSS3

[Lucas Abranches]

Bom , do twitter e assim ,

voce pode fazer POG ,

tipo:

<h1 class='cima'>teste<h1>

<h1 class='baixo'>teste</h1>

e poisicionar , mas eu não acho viável nem a pau ,

o IE 9 ta pra sair , acho q saindo vai botar esses ie atuais.

[fercosmig]

um exemplo

.cima{
	position:absolute;
	left:200px;
	top:200px;
	z-index:2;
	color:#000000;
	font-size:50px;
}

.baixo{
	position:absolute;
	left:205px;
	top:205px;
	z-index:1;
	color:#999999;
	font-size:50px;
}

<div class="cima">.:: Fer Cos Mig ::.</div>
<div class="baixo">.:: Fer Cos Mig ::.</div>

[Lucas Abranches]

fercosmig, melhor não usar o absolute ,

se for pra posicionar o margin ,

pois o absoluto ele pega da pagina toda, n fica legal.

.cima{

z-index:2;

color:#000000;

font-size:50px;

}

.baixo{

margin-top:-49px;

color:#999999;

font-size:50px;

}

exemplo.

[Matheus Matos]

O absolute refere-se á margem superior direita do elemento pai.

Lembrando que, o elemento pai é aquele que tem o position diferente do static (default).

Para saber mais, observe o artigo Propriedade position do CSS no tableless.

Basicamente se conseguir colocar os dois elementos no mesmo lugar na página, basta colocar um position relative no .baixo e top: 2px; e left: 2px; -- há, dá tudo no mesmo..

Abraços