Verander opmaak eerste letter met CSS

verander-opmaak-letter-css

Het aanpassen van de allereerste letter in een tekst bestaat al duizenden jaren. Je ziet het veel in hele oude boeken zoals de Bijbel waarbij de eerste letter volledig geïllustreerd werd. Enige jaren terug werd het veel gebruikt in de webdesign wereld en het ziet er naar uit dat deze trend weer terug is. Veel websites maken er (weer) gebruik van en daarom leek het mij leuk om een kleine tutorial hierover te schrijven.

Door het gebruiken van een pseudo-element in CSS kan je heel makkelijk de eerste letter in een paragraaf selecteren. Ik heb eerder geschreven over DIV’s, ID’s en CLASSES. Voor meer uitleg daarover verwijs ik je naar dat artikel. Een pseudo-element is een onderdeel van een element zoals onder andere een DIV, ID, CLASS of in dit geval een paragraaf.

Door de eerste letter in een paragraaf te selecteren gebruik je de p van paragraaf en voeg je daar de volgende code aan toe.

Een artikel bestaat vaak uit meerdere paragrafen en het ‘probleem’ met deze code is dat alle eerste letters in alle paragrafen, een groter formaat krijgen. Dat wil je natuurlijk niet! Wat je dan moet doen is alleen de eerste paragraaf kiezen en vervolgens daar de eerste letter selecteren. Hoe? Heel makkelijk! Namelijk met nog een pseudo-element! Ik gebruik hiervoor het element :first-child (vrij vertaald naar eerste kind, dus de eerste paragraaf).

Nou ziet dit er natuurlijk nog niet zo heel bijzonder uit, maar je kan door middel van extra CSS, hier hele leuke creaties mee maken. Kijk maar eens mee!

Wanneer je bovenstaande code gebruikt, krijg je het volgende resultaat. Door de kleuren, letterstijlen en schaduw aan te passen, ziet de eerste letter er anders uit zodat het gelijk meer opvalt.

first-letter-css

Door combinaties te maken met verschillende lettertypes kan je nóg leukere resultaten behalen, zoals je hier kan zien:
first-letter-css-3

* Beautiful Day is een lettertype wat ik geïnstalleerd heb op mijn computer. Als je deze code overneemt dan zal hij dit lettertype niet kunnen vinden en de code zal dan ook niet werken. Dit is puur als voorbeeld gebruikt.

Leuk he! Het aanpassen van de eerste letter trekt gelijk de aandacht naar de paragraaf, ziet er mooier en artistieker uit en kan zo jouw blogdesign nét wat anders eruit laten zien. Je kan dit ook altijd gebruiken voor het aanpassen van de eerste letter in de titel van een artikel! Dan moet je alleen even het CLASS element vinden en deze aanpassen.

Ik hoop dat je deze kleine tutorial handig vindt en mocht je vragen hebben, dan hoor ik ze graag! Dan wens ik je nu veel plezier met het aanpassen van je CSS, haha!

Geef een reactie

3 reacties

  1. Gaby says:

    hoi Naomi,
    Wat een supergave tip! Ik ben er meteen mee aan de slag gegaan, maar m’n technische kennis is toch vrij beperkt. Ik krijg nu toch geen mooie grote letter, maar daadwerkelijk de tekst te zien. Wat doe ik verkeerd?

    • Hoi Gaby, Ik snap niet helemaal wat je bedoeld dat de daadwerkelijke tekst te zien is… Heb je de code wel aan je stylesheet toegevoegd (style.css bestand)?

  2. Evelien says:

    Oh wat handig dit! Zeker voor mensen, zoals ik, die CSS wel leuk vinden en het wat meer willen leren 🙂 Yay!