In de webtip van vandaag gaan we eens een kijkje nemen naar de nieuwe mogelijkheden die CSS3, de opvolger van de huidige CSS versie, ons te bieden heeft. Ondersteuning voor CSS3 is in de huidige browsers nog maar beperkt aanwezig (in o.a. Chrome, Firefox, Opera en Safari) dus echt 100% cross-browser compatibel is het helaas nog niet.

Vandaag gaan we kijken naar 'text-shadow', waarmee je snel en simpel schaduw kunt toevoegen aan je teksten.

De 'text-shadow' functie in CSS is als volgt te gebruiken:

.tekst {
    text-shadow: 1px 1px 1px #000000;
}

Even een korte uitleg van alles:

• De eerste '1px' is voor hoever de schaduw horizontaal moet afwijken van de tekst. '1px' betekent hier dus dat de schaduw zich 1 pixel rechts van de tekst bevindt. '-1px' verschuift de schaduw 1 pixel naar links.
• De tweede '1px' is voor hoever de schaduw verticaal moet afwijken van de tekst. '1px' betekent hier dus dat de schaduw zich 1 pixel onder de tekst bevindt. '-1px' verschuift de schaduw 1 pixel boven de tekst.
• De derde '1px' geeft de scherpte (blur) van de schaduw aan. Hoe groter het getal, hoe minder scherp de schaduw zal zijn.
• En dan hebben we nog de kleurcode die de kleur van de schaduw bepaalt.

Ons bovenstaande voorbeeld zal dan ook het volgende effect hebben. Let op: alleen te zien in ondersteunende browsers (geen Internet Explorer!).

Op deze manier zijn er veel verschillende varianten mogelijk, zo kun je naast het laten uitspringen van tekst, de tekst ook in de pagina laten 'drukken':