Je hebt binnen je website een standaard opmaak voor je tekst en uiteraard maak je voor de beste SEO resultaten gebruik van bijvoorbeeld H1- en H2-koppen. Sliders gebruik jij natuurlijk niet, wil je weten waarom stuur ons dan gerust een berichtje, maar een mooie website zul je mogelijk wel voorzien van een headerfoto.

Tekst leesbaar maken met text-shadow in CSS

Let wel op dat je deze niet zo hoog maakt dat het voor je bezoekers niet duidelijk is dat er nog meer te zien is op een pagina, maar dat is het onderwerp gebruiksvriendelijke websites en daar hebben we al meerdere blogs over geschreven, dus dat laten we nu rusten.

Stel je gebruikt een headerfoto van 500 pixels hoog in je website. Daar wil je een tekst in zetten. Alleen wat krijgt de meeste aandacht? De tekst of de foto’s? Je zult zien dat als je de tekst bijvoorbeeld standaard wit maakt, het slecht leesbaar is. Hoe verbeter je die leesbaarheid? Voeg een schaduw toe aan de tekst. Het makkelijkste is als je een class toevoegt aan de titels want dan kun je heel specifiek de schaduw aan die titels toekennen. Hoe dat werkt leggen we hieronder uit.

Je hebt een H2 in de header staan en hier de class ‘header’ aan gekoppeld. Plaats dan deze code in je style.css.

.header h2 { text-shadow: rgba(0,0,0,0.5) 1px 1px 2px !important; }
  • De kleur kun je in dit geval vervangen voor een andere rgb kleur, dit is de eerste 0,0,0.
  • Met de 0.5 kun je de transparantie aanpassen.
  • De afsluitende px-waardes geven aan hoe groot/breed de schaduw moet worden. Dit kun je uiteraard naar wens aanpassen.

Leesbaarheid verbeteren met schaduw

Is dit de beste optie om een tekst leesbaar te maken? Als je tekst over een foto wilt plaatsen en geen achtergrond kleur bij de tekst wilt geven wel. Het is voor iedereen goed te lezen wat er staat en niemand heeft problemen.

Als je meer wilt leren verwijzen we je graag naar ons artikel over CSS.

Feedback

Heb je na het lezen van dit artikel nog vragen of zijn er onduidelijkheden? Werkt de code niet op jouw website? Laat het ons weten, dan kunnen wij je misschien verder helpen.

Feedback kennisbankartikel

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Mis geen WordPress tips meer.

Al 500+ webdesigners en marketeers ontvangen deze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.