Een 3D-tekst maken voor je site doe je zo!

Met behulp van CSS3-technieken kun je met enkel code een stukje tekst in 3D zetten.

Met CSS3-technieken maak je hele leuke teksteffecten op je website, die vroeger alleen met behulp van fotobewerkingssoftware mogelijk waren. Een van de mogelijkheden is een stukje 3D-tekst.

Text-shadow

De css-eigenschap die je moet gebruiken om 3D-tekst te kunnen maken, is die van text-shadow. Die text-shadow kun je vier eigenschappen meegeven:

1. de grootte van de schaduw in horizontale richting, bijvoorbeeld: 3px

2. de grootte van de schaduw in verticale richting, bijvoorbeeld: -3px

3. de blur (waarmee je de grootte van de vervaging vastlegt), bijvoorbeeld: 5px

4. de kleur van de schaduw, bijvoorbeeld: #505050

Deze eigenschappen moet je in precies deze volgorde opnemen, anders snapt je browser het niet. Dit levert dus de volgende code op: text-shadow: 3px -3px 5px #505050;

Door bovenstaande code verspringt de schaduw van de tekst 3 pixels naar rechts, 3 pixels naar boven (een negatieve waarde laat de schaduw naar boven verspringen in plaats van naar beneden). Ook krijgt de schaduw door deze code een lichtgrijze tint, en vervaagt hij in 5 pixels. Gecombineerd met een donkerrode tekstkleur maroon in het lettertype courier new, krijg je het volgende effect:

tekst met schaduw

Voor de laatste twee eigenschappen (blur en kleur) hóef je niets op te geven, je kunt dus ook volstaan met alleen de waardes voor de horizontale en verticale verspringing van de schaduw.

3D-tekst

Om een 3D-tekst te maken, ga je op dezelfde manier te werk. Om het nog wat realistischer te maken, zet je meerdere schaduwen achter elkaar. Elke schaduw is van de vorige gescheiden door een komma, en de laatste schaduw sluit je af met een puntkomma.

Voor de 3D-tekst hieronder heb ik een donkerblauwe tekstkleur gekozen (#000033) in het lettertype verdana. De tekstschaduw heb ik alleen naar beneden laten weergeven (dus de eerste waarde van elke schaduw – die van de horizontale verspringing – is steeds 0px).

Verder heb ik acht lagen met tekstschaduw aangebracht, elke laag is steeds 1 pixel groter dan de vorige (zodat steeds maar een randje van 1 pixel van elke kleur te zien is) en de kleur van elke laag loopt op van heel lichtgrijs (#909090) naar zwart (black). Om een zo natuurlijk mogelijk effect te krijgen, moet je met de lichtste tint beginnen, en eindigen met de donkerste tint. Om de rand van de laatste laag wat te ‘verzachten’, heeft deze een vervaging gekregen van 7px.

3D-tekst

De code van bovenstaande 3D-tekst is dus de volgende:

<p style="font-family: verdana, sans-serif; font-size: 2em; font-weight: bold; color: #000033; text-shadow: 0px 1px #909090, 0px 2px #808080, 0px 3px #707070, 0px 4px #606060, 0px 5px #505050, 0px 6px #404040, 0px 7px #303030, 0px 8px 7px black;">3D-tekst</p>

Meer voorbeelden met schaduw-tekst

Met deze simpele techniek kun je behalve 3D-teksten, nog veel meer leuke teksteffecten maken. Hieronder staan een paar voorbeelden.