Mijn-eigen-website.nl

Vrolijk je webpagina's op met interessante initialen

Een bijzondere initiaal is niet moeilijk te maken en fleurt pagina's met lange blokken tekst direct op.

Je kent ze vast wel van plaatjes van oude boeken: van die initialen (beginletters) die niet zomaar neergepend zijn, maar die eruitzien alsof er dagen werk aan is besteed. Die mooie beginletters die aan sommige alinea's werden toegevoegd dienden o.a. als houvast: vaak werden teksten achter elkaar geschreven zonder veel witregels (en soms stonden er zelfs geen spaties tussen de woorden). Dan wordt het dus moeilijk om iets terug te vinden. Zo'n opvallende letter helpt de lezer daarbij.

Voor webpagina's hoef je om bovenstaande reden natuurlijk geen mooie beginletter te gebruiken. Maar als je pagina uit heel veel blokken tekst bestaat, is dit wel een leuke manier om je pagina wat op te vrolijken. Hieronder leg ik je uit hoe je zo'n bijzondere initiaal maken kunt.

Je begint met de eerste letter van je alinea tussen een set span-tags te zetten. Dit span-element kun je nu afwijkende stijleigenschappen geven, bijvoorbeeld een afwijkend lettertype, een andere kleur, en misschien wat vetter en groter. Dat doe je met de volgende eigenschappen: font-family, color, font-weight en font-size. Om ervoor te zorgen dat de tweede letter netjes aansluit op de eerste, maak je eventueel ook nog gebruik van de eigenschap: margin-right.

Hiermee heb je op een simpele manier een bijzondere initiaal gemaakt. Je kunt hiermee natuurlijk nog eindeloos variëren. Een paar suggesties:

Zet de initiaal links naast je paragraaf neer, zodat hij er een beetje buiten valt. Daarvoor voeg je aan de paragraaf waarbinnen deze beginletter staat, de eigenschap text-indent toe. Je geeft die een negatieve waarde, zodat de kantlijn van de eerste regel naar links verspringt. De alinea moet je misschien tegelijkertijd iets naar rechts laten verspringen, zodat alles mooi onder elkaar komt te staan. Dat doe je met de eigenschap: margin-left.

Laat de initiaal naar beneden zakken, zodat hij niet meer boven de tekst uit steekt, maar de beginruimte van meerdere regels inneemt. Dit heet 'verzonken'. Dat doe je met de eigenschappen: float: left, margin-top, en margin-bottom. Je moet waarschijnlijk een beetje spelen voordat je een goede verhouding hebt tussen lettergrootte, en de waarden voor margin-bottom en margin-top. Het is het mooiste als de onderkant van de beginletter op één lijn komt te staan met een van de regels.

Nóg een suggestie voor een variatie: geef de initiaal de kleur van de achtergrond van je pagina, en zet het binnen een vakje met een afwijkende achtergrondkleur. Daarvoor moet je eerst de eigenschap background-color toevoegen en de tekstkleur (color) veranderen in wit bijvoorbeeld (als dat de achtergrondkleur van je pagina is). Verder heb je voor deze initiaal de eigenschappen display: inline-block en padding nodig. En waarschijnlijk moet je ook weer spelen met de waardes voor margin-top, margin-right en margin-bottom, net zo lang je tevreden bent met het resultaat.

Laat een achtergrondafbeelding zien, in plaats van een achtergrondkleur. Dat doe je met de eigenschap background-image. En geef je letter gelijk wat meer diepte met de eigenschap text-shadow.

En ten slotte: gebruik een opvallend lettertype, bijvoorbeeld een lettertype van Google webfonts. Hier heb ik het lettertype Georgia bijvoorbeeld door het lettertype Jacques Francois Shadow, Daarvoor moet je in de head van je pagina's een link naar het stylesheet van dit font zetten (deze link krijg je van Google), en dan kun je dit font gewoon op de normale manier aanroepen achter de eigenschap font-family.

Copyright © 2004-2017 Arkon v.o.f. – Leiden / KvK: 28069730 / BTW: NL805348827B01
contactsitemapprivacybeleid