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.