Text Shadow Generator
CSS text shadow
CSS text shadow Wordt lokaal uitgevoerd in uw browser
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.30);
About the
De Text Shadow Generator stelt de offset, vervaging, kleur en dekking van een schaduw achter tekst in, met een live preview en de CSS. In tegenstelling tot box-shadow heeft het geen spreidingswaarde, wat mensen opvalt: de enige manier om een tekstschaduw zwaarder te maken is door meerdere schaduwen in één declaratie te stapelen. Het is vooral handig voor de leesbaarheid, omdat het een subtiele donkere schaduw achter lichte tekst op een foto plaatst, en het mag nooit iets zijn dat tekst leesbaar maakt, omdat het verdwijnt zodra de achtergrond verandert.
Where people use the
- Een subtiele schaduw toevoegen zodat een bijschrift over een foto heen leest.
- Een geperst of gegraveerd koerseffect maken.
- Het produceren van een retro- of neontekstbehandeling.
- Testen hoe zwaar een schaduw moet zijn voordat deze er goedkoop uitziet.
How to use the
- 1
Stel de offsets in
Offset X beweegt naar rechts, offset Y beweegt naar beneden. Een offset van één of twee pixels wordt gelezen als diepte; alles wat groter is, begint op een slagschaduw te lijken.
- 2
Stel de vervaging in
Vervaging verzacht de rand. Zero geeft een harde duplicaat van de tekst, zo worden omtrek- en retro-effecten gemaakt.
- 3
Kies kleur en dekking
Donkere tekst op een lichte achtergrond wil een lichte schaduw en omgekeerd. Houd de dekking laag, tenzij u een duidelijk effect wilt.
- 4
Kopieer de CSS
De regel bevat de rgba-kleur, klaar om te plakken.
- 5
Stapel schaduwen als je meer gewicht nodig hebt
Voeg een tweede schaduw toe, gescheiden door een komma, in uw stylesheet. Dat is de enige manier om een tekstschaduw dikker te maken, aangezien er geen sprake is van spreiding.
Tips en beste praktijken
- Minder is meer: één of twee pixels bij een lage dekking verslaan een zware onscherpte.
- Vertrouw nooit alleen op een schaduw voor toegankelijkheid; corrigeer het contrast eronder.
- Houd er rekening mee dat de eigenschap wordt geërfd, dus beperk deze tot het element dat u bedoelt.
Veelgestelde vragen
Waarom is er geen spreadwaarde?
Omdat tekstschaduw er geen ondersteunt. De syntaxis is offset X, offset Y, alleen vervaging en kleur. Om spreiding te simuleren, stapelt u verschillende identieke schaduwen met enigszins verschillende verschuivingen.
Kan ik het gebruiken om tekst leesbaar te maken over een afbeelding heen?
Enkel als aanvulling. Een schaduw helpt aan de randen, maar faalt in drukke gebieden, en telt niet mee voor de WCAG-contrastverhouding, die wordt gemeten ten opzichte van de achtergrondkleur. Voeg een gaasdoek of een stevig paneel toe als de leesbaarheid er echt toe doet.
Hoe schets ik tekst?
Stapel vier schaduwen met plus en min één pixel in elke richting, zonder vervaging. Dat levert een contoureffect op zonder dat -webkit-text-stroke nodig is, wat niet overal wordt ondersteund.
Vertraagt dit de pagina?
Een enkele statische schaduw kost bijna niets. Het animeren van een tekstschaduw, of het toepassen van een grote, vervaagde schaduw op veel tekst, is waar de kosten voor opnieuw schilderen verschijnen.
Wordt het geërfd door onderliggende elementen?
Ja. Tekstschaduw wordt geërfd, dus als u deze op een container plaatst, wordt deze toegepast op elke afstammeling met tekst, wat soms verrassend is.