Na het vorige voorbeeld kunnen we het principe van effecten op tekst nog een beetje uitbreiden.
Deze keer groter door een heel deel tekst achter een semi-transparente PNG te steken welke de indruk geeft dat tekst gedeeltelijk verdwijnt.
Effecten geven op tekst is mogelijk met enkel en alleen CSS, je moet gewoon een beetje vindingrijk zijn. Door middel van een transparente PNG die een effect bevat en deze over de tekst te positioneren kan je de indruk wekken dat je tekst “iets speciaals heeft”.
Je kan bijvoorbeeld tekst (links, tekst, quotes) vertikaal centreren ten opzichte van zijn parent element door geschikt line-height te gebruiken.
Best wel handig om alle tekst gerelateerde CSS bepalingen in één apart bestand te steken, best in combinatie met één of andere reset.css waar het web tegenwoordig van overloopt.
Om gemakkelijk met em te kunnen werken moet je een standaard waarde maken voor je tekst, dus normaal is bij elke browser 16px de standaard waarde, nu gaan we deze gemakklijkshalve naar 10px brengen door: