Hoofdletters maken met CSS

Muhammed Aydogan

Marketing Specialist

27/3/2015

De eerste vraag die in je opkomt is waarschijnlijk “waarom zou je dit willen?”. Normaal gesproken zou het niet nodig moeten zijn om hoofdletters te maken met CSS. Er zijn echter situaties denkbaar waarbij dit wel nodig is.

In ons geval liepen wij tegen het probleem aan dat één van onze klanten een website heeft waarbij alle titels volledig in hoofdletters zijn geschreven. Echter kwamen zij vele maanden later met het verzoek om dit aan te passen waarbij de titels alleen nog beginnen met een hoofdletter. Normaal gesproken een kwestie van de titels even beetpakken en wijzigen waar nodig. Klein probleempje in dit geval is dat de website multilingual is opgezet waarbij alles in drievoud moet worden aangepast. Dat maakt de klus al snel een stuk vervelender en vooral tijdrovend!

En daar komt een leuke CSS truc om de hoek kijken d.m.v. pseudo class:

::first-letter

In de volgende stappen zie je hoe je de pseudo class kunt toepassen:

  1. Stap 1 is om de titel lowercase te maken (text-transform:lowercase;)
  2. Stap 2 is om alleen de eerste letter van de titel in kapitalen te tonen door te targeten op ::first-letter (text-transform:uppercase;)
  3. In sommige gevallen kan het zijn dat je het desbetreffende element display:inline-block; moet meegeven

Hoe dit eruit ziet in de CSS:

h2 {

text-transform: lowercase;

}

h2::first-letter {

text-transform: uppercase;

}

Laat het duidelijk zijn, 9 van de 10 keer zal de bovenstaande fix niet nodig zijn en is ook niet volledig bulletproof. Zie het dan ook als een “leuk weetje”!

Blog Categorieën

FRMWRK Podcast 🎙

In de podcast Op Weg Naar 20 Miljoen bespreken we elke week manieren om je webshop te groeien! Luister je mee?

Luister op:

Podcast
Ondernemen
HRMWRK
Webshop Ontwikkeling
Online Marketing
ROI Strategie