Dit is ideaal voor headers, kopregels en titels enzo. Wat we eigenlijk gaan doen is 2 regels tekst met CSS zo positioneren dat ze elkaar overlappen, uiteindelijk zal het eruit zien als een afbeelding (want zeg nu eerlijk, wist je dat dit kon?).

Geen afbeeldingen

De universele XHTML:

<h2 class="mijnhoofding">Gigadesign </h2>
<h3 class="mijnhoofding">Standaard
Webresources</h3>

Zoals je ziet, niks speciaal, gewoon 2 headings, respectievelijk <h2> & <h3>

De Css:

H2.mijnhoofding {
position: relative;
top: 5px;
left: 5px;
font: italic 72pt times, serif;
color: #FC0;
}

H3.mijnhoofding
{
position: relative;
top: -60px;
font: bold 18pt times, sans-serif;
color: #000;
margin-left: 20px;
}

We geven de <h2> een plaatsing, hier 5px vanaf boven en 5px vanaf links, bepalen lettertype, eigenschap en groote, daarnaa bepalen we de <h3> die we een juiste positie moeten geven om het effect te verkrijgen. speel een beetje met de instellingen om het voor jouw juiste effect te verkrijgen (omdat elke tekst weer anders is). Door de top waarde negatief te maken haal je de tekst naar boven, dus hoe hoger je waarde, hoe hoger de tekst zal komen te staan.

Voorbeelden

Css

Style Sheet

Gigadesign

Style Sheet Design

Xhtml

Moet valid zijn