Skyggetekst uden brug af grafik
Sat på siden 16-08-2004
Hvis du har arbejdet med stylesheets, har du nok opdaget, at der er en egenskab, der hedder "text-shadow". Hvis du ligesom jeg har prøvet at bruge den, har du måske også opdaget at den ikke virkede.
Det gør den nu -- det er browserne, der ikke virker. Så du er nødt til at bruge en anden metode, hvis du vil lave skyggeeffekter uden at bruge grafik.
Midlet er stadig stylesheets, men du er nødt til at lave to overskrifter, der blot har hver sin farve og er placeret lidt forskudt i forhold til hinanden. Koden kan fx se således ud:
<div style="position:relative;">
<h1 style="color:red; position: relative; z-index:2">
Smart overskrift -- ingen grafik
</h1>
<h1 style="color:gray; position: absolute; left:3px; top:3px; z-index:1; margin:0;">
Smart overskrift -- ingen grafik
</h1>
</div>