Hoe krijg je tekst schaduw met CSS en SPAN

Inleiding

Tekst schaduw is heel makkelijk te realiseren met een SPAN html elements en CSS. Door het span element een absolute positie mee te geven en een klein marge verschil kan een schaduw effect worden gesimuleerd.

Stappen

Via de ondergaande code wordt schaduw gesimuleerd.

  • Maak eerst een CSS aan met positie absoluut en marge links + boven
  • Maak daarna een tekst aan zowel binnen als buiten de SPAN aan.

de code:

<style>
BODY { margin: 0; padding: 0; font: 11px Tahoma; color: #093F74; }
h1 span
	{
position: absolute;
margin-top: -1px;
margin-left: -1px;
color: #ffffff;
}
</style>
<body style='background:#CCCCCC;'>
<h1><span>LeerWiki</span>LeerWiki<b><span>.nl</span>.nl</b></h1>
<p></body>
</p>

Tips


Handige links