De meeste CSS-teksteffecten die er ingewikkeld uitzien, zijn gemaakt van één eigenschap Het neonbord op een landingspagina, de harde omtrek op een speltitel, de gestapelde oranje letters die eruitzien als een platenhoes uit de jaren zeventig: elk daarvan is een enkele text-shadow declaratie met meerdere komma-gescheiden lagen De syntaxis is kort Het harde gedeelte is het plukken van offsets en vervagingswaarden die goed lezen, en onthouden welke laag er bovenop schildert.
Deze gids behandelt de text-shadow grammatica, hoe gelaagdheid werkt, de recepten achter de gemeenschappelijke effecten met de exacte waarden die ze gebruiken, en de fouten die schaduwtekst moeilijk leesbaar of langzaam weer te geven maken Elk voorbeeld kan opnieuw worden opgebouwd in de CSS tekstschaduwgenerator, die het resultaat live laat zien en de verklaring voor u schrijft.
tl;dr:
text-shadowneemt een door komma's gescheiden lijst van schaduwen, elk geschreven alsoffset-x offset-y blur-radius color. De eerste schaduw in de lijst schildert er bovenop. 't Heeft geen spread value en neeinsettrefwoord, in tegenstelling totbox-shadow. Gloeien zijn verschillende zero-offset schaduwen met groeiende onscherpte, contouren zijn vier one-pixel harde schaduwen, en 3D tekst is een stapel harde schaduwen elk een pixel verder naar buiten De Toolz tekstschaduwgenerator bouwt deze met schuifregelaars en acht presets, client-side, gratis, geen aanmelding.
Wat is de eigenschap Text-Shadow van CSS?
de text-shadow eigenschap schildert een of meer schaduwen achter de glyphs van een element' s tekst Het is gedefinieerd in de W3C CSS Tekstdecoratiemodule Niveau 3, en de waarde ervan is beide none of een door komma's gescheiden lijst met schaduwen.
Elke schaduw heeft maximaal vier delen:
| Part | Vereist | Wat het doet | Toegestane waarden |
|---|---|---|---|
| Horizontale offset | ja | Verplaatst de schaduw naar rechts (positief) of naar links (negatief) | Elke lengte, bijv. 2px, -0.1em |
| Verticale offset | ja | Verplaatst de schaduw naar beneden (positief) of omhoog (negatief) | Elke lengte |
| Vervagingsradius | Nee, standaard ingesteld op 0 |
Verzacht de rand; groter betekent vervagender | Nul of een positieve lengte Negatief is ongeldig |
| Kleur | Nee, standaard ingesteld op currentColor |
Schaduwkleur, inclusief transparantie | Elke CSS kleur |
De kleur kan als eerste of als laatste gaan. text-shadow: #000 1px 1px en text-shadow: 1px 1px #000 zijn dezelfde schaduw Als je de kleur weglaat, neemt de schaduw de tekst' een eigen kleur, wat zelden is wat je wilt voor een slagschaduw maar handig voor een snelle gloed in de tekstkleur.
Een schaduw verandert nooit van lay-out. Het duwt aangrenzende elementen niet weg en laat het element niet groeien. ' S box, dus een grote onscherpte kan buiten de box terechtkomen en worden afgesneden door een ouder met overflow: hidden.
Hoe verschilt tekstschaduw van doosschaduw?
text-shadow volgt de vorm van elke letter, terwijl box-shadow volgt de rechthoek van het element' s randvak Dat is het praktische verschil, en het beslist naar welke je reikt Ook de grammatica verschilt.
| gelaatstrek | text-shadow |
box-shadow |
|---|---|---|
| Vorm van de schaduw | Elke glyph-omtrek | Het element's doos, inclusief afgeronde hoeken |
| Spreid radius | Niet beschikbaar | Ja, vierde lengte |
inset keyword |
Niet beschikbaar | ja |
| Meerdere lagen | Ja, komma-gescheiden | Ja, komma-gescheiden |
| Verfbestelling | Eerst bovenaan vermeld | Eerst bovenaan vermeld |
| Standaardkleur | currentColor |
currentColor |
| Typisch gebruik | Kopjes, logo's, leesbaarheid over afbeeldingen | Kaarten, knopen, verhoging |
De ontbrekende spreadwaarde is de reden waarom tekstcontouren vier schaduwen nodig hebben in plaats van één. met box-shadow je kunt schrijven 0 0 0 2px black om een stevige ring te laten groeien Met tekst is er geen manier om de glyph uit te breiden, dus je vervalst het door kopieën in verschillende richtingen te compenseren. Als je de container stylt in plaats van de woorden, de gids voor schaduwgeneratoren voor dozen bedekt gespreide, inzet- en hoogtelagen.
Hoe werkt het gelaagdheid van meerdere tekstschaduwen?
Een enkele declaratie kan zoveel schaduwen bevatten als je wilt, gescheiden door komma's, en de browser schildert de eerste die het dichtst bij de kijker staat De laatste schaduw in de lijst zit achterin De tekst zelf schildert altijd boven alles.
Dat ordening ertoe doet wanneer lagen elkaar overlappen Vergelijk deze twee verklaringen met
/* Sharp dark layer on top of a soft glow */
text-shadow: 2px 2px 0 #000, 0 0 12px #ff0;
/* Soft glow painted over the sharp layer */
text-shadow: 0 0 12px #ff0, 2px 2px 0 #000;
In het eerste blijft het knapperige zwarte exemplaar scherp en zit de gele waas erachter In het tweede spoelt de gele gloed over het zwarte exemplaar en verzacht het Zelfde schaduwen, andere look.
De generator volgt dezelfde regel Laag 1 in de laagtabbladen is de eerste schaduw in de uitvoer, dus deze schildert er bovenop Voeg een laag toe aan het einde van de lijst, achter de andere Om een laag vooruit te bewegen verwijder je deze en maak je deze opnieuw, of bewerk je de gekopieerde CSS met de hand.
Welke waarden schrijft de Toolz-generator?
de tekstschaduwgenerator geeft elke laag vijf bedieningselementen en schrijft een declaratie in een vast formaat Dat formaat kennen helpt als je het resultaat in een codebase plakt met zijn eigen conventies.
| Control | Bereik | Step | Geschreven als |
|---|---|---|---|
| Offset X | -50px tot 50px | 1px | Npx |
| Offset Y | -50px tot 50px | 1px | Npx |
| Vervagen | 0px tot 100px | 1px | Npx, inclusief 0px |
| Kleur | Kleurkiezer | teneinde | 6-cijferig vakje |
| Ondoorzichtigheid | 0% tot 100% | 1% | Toegevoegd als twee hex cijfers na de kleur |
De dekking wordt in de kleur gevouwen als een zeskantige waarde van 8 cijfers, volgens de CSS Color Module Level 4 hex notatie. De laatste twee cijfers zijn het alfakanaal op een schaal van 0 tot 255, dus het gereedschap vermenigvuldigt de dekking met 255, rondt en converteert naar hex.
Hier is hoe dat uitpakt voor een paar ondoorzichtigheden:
| Opaciteitsschuifregelaar | Keer 255 | Afgerond | Hex alfa | Voorbeeld kleur |
|---|---|---|---|---|
| 100% | 255 | 255 | ff |
#000000ff |
| 90% | 229,5 | 230 | e6 |
#4466eee6 |
| 70% | 178,5 | 179 | b3 |
#4466eeb3 |
| 60% | 153 | 153 | 99 |
#00000099 |
| 35% | 89.25 | 89 | 59 |
#00000059 |
| 25% | 63,75 | 64 | 40 |
#00000040 |
Elke huidige browser leest 8-cijferig hex Als u een zeer oude browser moet ondersteunen, herschrijf de kleur dan als rgba() na kopiëren: #00000099 HALD rgba(0, 0, 0, 0.6).
Het gereedschap accepteert alleen schuif- en picker-invoer, dus waarden zijn hele pixels. Voor een schaduw gemeten in em, die schaalt met lettergrootte, kopieer de CSS en verwissel de eenheden in uw stylesheet. A 2px offset op 16px body tekst is 0.125em.
Hoe maak je een neon glow text effect?
Een neongloed bestaat uit verschillende schaduwen zonder offset, dezelfde heldere kleur en toenemende onscherpte. Elke laag voegt een bredere, zwakkere halo toe, en samen zien ze eruit als licht dat in de omringende lucht bloedt.
De generator opent op zijn Neon Glow preset, die dit produceert
text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;
Drie lagen, vervagingsverdubbeling telkens (7, 14, 28), dekking terugvallen van 100% naar 90% naar 70% De strakke 7px laag geeft de letters een heldere kern, en de 28px laag spreidt de kleur uit Op een donkere achtergrond met witte tekst leest dit als een verlichte buis Op een lichte achtergrond verdwijnt het meeste effect, daarom heeft de preview een Light bg /Dark bg toggle: check beide voordat je een gloed naar een site verzendt met een themaschakelaar.
Om de gloed sterker te maken, voeg je een vierde laag toe bij 56px vervagen of herhaal je de 7px laag twee keer Herhalen van een laag stapelt de dekking en maakt de kern intenser zonder deze te verbreden.
Hoe schetst u tekst met tekstschaduw?
Plaats vier harde schaduwen (onscherpte 0) één pixel uit op elke diagonaal Hun overlap volgt de rand van elke glyph.
De Outline preset schrijft
text-shadow: -1px -1px 0px #000000ff, 1px -1px 0px #000000ff, -1px 1px 0px #000000ff, 1px 1px 0px #000000ff;
Dit werkt goed bij één pixel Bij twee of drie pixels beginnen gaten te vertonen in het midden van krommen en rechte randen, omdat de vier kopieën alleen de diagonalen bedekken Voor een dikkere omtrek, voeg nog vier lagen toe op de rechte assen (0 -2px, 2px 0, 0 2px, -2px 0) dus acht exemplaren omringen elke letter.
Er is een niet-schaduwalternatief. -webkit-text-stroke tekent een echte streek langs het glyph-pad en wordt ondanks het voorvoegsel ondersteund door de huidige browsers. Het is gecentreerd op de omtrek, dus het eet in dunne letters, en het wordt gespecificeerd in de WHATWG Compatibility Standard in plaats van in een CSS-module. Voor kleine, scherpe contouren op de weergavetekst blijft de truc met vier schaduwen de meest voorspelbare optie.
Hoe maak je 3D of geëxtrudeerde tekst?
Stapel meerdere harde schaduwen in dezelfde kleur, elk een pixel verder naar beneden en rechts verschoven Elke kopie voegt één pixel diepte toe, en het oog leest de stapel als de zijkant van een ononderbroken letter.
De Retro 3D-voorinstelling:
text-shadow: 1px 1px 0px #e99537ff, 2px 2px 0px #e99537ff, 3px 3px 0px #e99537ff, 4px 4px 0px #00000040;
Drie oranje lagen bouwen een extrusie met drie pixels, en een vierde zwarte laag met een opaciteit van 25% zit een pixel verder naar buiten als contactschaduw die de letters aardt Voor een diepere extrusie blijf je oranje lagen toevoegen met offsets 4, 5, 6 en verplaats je de donkere laag naar het einde Twaalf lagen voor een 12px extrusie is normaal voor een grote heldenkop.
De Long Shadow-preset gebruikt hetzelfde idee met gaten en vervagende dekking:
text-shadow: 1px 1px 0px #00000033, 3px 3px 0px #00000026, 6px 6px 0px #0000001a, 10px 10px 0px #0000000f;
De verschuivingen groeien (1, 3, 6, 10) terwijl de dekking afneemt (20%, 15%, 10%, 6%), waardoor de schaduw diagonaal wegloopt in plaats van een massief blok te vormen.
Welk tekstschaduwrecept past bij welk effect?
Hier zijn alle acht presets in de generator, met het idee achter elk zodat je ze kunt aanpassen.
| Voorinstelling | Lagen | Verboden | Vervagen | Idee |
|---|---|---|---|---|
| Zacht | 1 | 0, 2px | 4px | Subtiele slagschaduw bij 35% zwart, veilig voor de meeste rubrieken |
| Hard | 1 | 2px, 2px | 0 | Scherpe offset kopie op 60% zwart, een platte print look |
| Neon Glow | 3 | 0, 0 | 7, 14, 28px | Dezelfde kleur, groeiende onscherpte, voor licht op donker |
| Retro 3D | 4 | 1 tot 4px diagonaal | 0 | Gestapte papieren exemplaren plus een zwakke contactschaduw |
| Outline | 4 | +/-1px diagonalen | 0 | Vier exemplaren die de glyph-rand volgen |
| Emboss | 2 | -1px/-1px en 1px/1px | 0 | Wit hoogtepunt linksboven, donkere tint rechtsonder |
| Fire | 3 | 0, -1 / -2 / -4px | 4, 10, 18px | Geel tot oranje tot rood, omhoog stijgend |
| Long Shadow | 4 | 1, 3, 6, 10px diagonaal | 0 | Groeiende kloof, vervagende ondoorzichtigheid |
Emboss is degene die mensen verkeerd lezen Het koppelt een lichte schaduw omhoog en naar links met een donkere schaduw naar beneden en naar rechts, die licht nabootst van de linkerbovenkant die op verhoogde letters slaat Wissel de twee kleuren en de tekst kijkt in plaats daarvan in de pagina gedrukt, het klassieke boekdruk effect Beide werken alleen als de tekstkleur dicht bij de achtergrondkleur ligt; op tekst met hoog contrast verdwijnen de highlights.
Vuur is de enige preset met negatieve verticale verschuivingen Elke laag beweegt verder omhoog en wordt waziger en roder, waardoor de warmte van de letters lijkt op te stijgen.
Heeft tekstschaduw de leesbaarheid of toegankelijkheid geschaad?
Het kan, en het risico groeit met vervaging en offset Een schaduw verandert niets aan de contrastverhouding die WCAG meet, die berekend wordt tussen de tekstkleur en de achtergrondkleur De WCAG 2.1 contrastminimum vraagt om 4,5:1 voor normale tekst en 3:1 voor grote tekst, en een gloed helpt je niet om dat op papier te ontmoeten.
In de praktijk maakt een dunne donkere schaduw achter lichte tekst op een drukke foto de letters makkelijker uit te pikken, omdat het de glyph randen van de afbeelding scheidt Een zware gloed op kleine tekst doet het tegenovergestelde: de halo vult de tellers van letters als "e" en "a" en het woord verandert in mush.
Enkele richtlijnen die standhouden:
- Houd body text schaduwen subtiel Iets als
0 1px 2px rgba(0, 0, 0, 0.3)is genoeg. - Bewaar meerlaagse effecten voor grote weergavetekst, ongeveer 32px en hoger.
- Controleer het effect op zowel lichte als donkere achtergronden als uw site een thema-toggle heeft.
- Vertrouw niet op de schaduw om een laag contrast te redden. Repareer eerst de tekstkleur.
- Test op het kleinste formaat dat de kop bereikt op een telefoon, waar de schaduw verhoudingsgewijs het grootst is.
Wat vertraagt tekstschaduw en wat zijn veelgemaakte fouten?
Waas is het dure onderdeel Elke wazige laag moet bij elke herschildering worden gerasterd en wazig, en de kosten schalen met wazige straal en de hoeveelheid tekst De MDN-referentie voor tekstschaduw dekt de syntaxis De prestatiekant is eenvoudig te redeneren: een drielaagse gloed op een enkele kop is goedkoop, en dezelfde gloed op elke paragraaf van een lang artikel, opnieuw geverfd tijdens het scrollen, is een veel voorkomende bron van jank op telefoons met laag vermogen.
Fouten die steeds weer opduiken:
| Fout | Symptoom | Fix |
|---|---|---|
Een spreadwaarde schrijven zoals 0 0 4px 2px red |
De hele verklaring wordt genegeerd | Verwijder de vierde lengte; tekstschaduw heeft geen spreiding |
Toevoegen inset |
Verklaring genegeerd | Niet ondersteund op tekst; gebruik in plaats daarvan een lichtere reliëf |
Negatieve vervaging, bijv. -2px |
Verklaring genegeerd | Vervaging moet nul of positief zijn |
| Ontbrekende komma's tussen lagen | Verklaring genegeerd, niets geeft | Scheid elke schaduw met een komma |
| Gloed geknipt aan de randen | Halo in een rechte lijn gesneden | Ouder heeft overflow: hidden; opvulling toevoegen |
| Gloed onzichtbaar | Er lijkt niets te gebeuren | Lichte gloed op lichte achtergrond; test op donker |
Leveranciersvoorvoegsel -webkit-text-shadow |
Onschadelijk maar nutteloos | Gebruik plain text-shadow; het heeft geen voorvoegsel nodig |
De eerste drie zijn het benadrukken waard Een enkel ongeldig deel maakt de hele declaratie ongeldig, niet alleen die laag, dus een typefout in laag vier van een twaalflaags 3D-effect verwijdert ze alle twaalf De generator's-uitvoer is altijd geldig, wat een reden is om de stapel daar te bouwen en in te plakken.
Wanneer moet je een generator gebruiken in plaats van tekstschaduw met de hand te schrijven?
Een enkele zachte schaduw is sneller te typen dan te klikken. Alles met drie of meer lagen is sneller visueel te bouwen, omdat je een look beoordeelt en een look moeilijk te beoordelen is op basis van cijfers. De generator is ook handig om te leren: kies een voorinstelling, verander één laag en kijk welk deel van het effect beweegt.
De Toolz generator draait volledig in de browser De preview, de layer list en de CSS worden allemaal berekend op de pagina, niets wordt geüpload, en het blijft offline werken zodra geladen Het is gratis, geen aanmelding CSS kopiëren wordt geteld op een dagelijkse gebruiksvergoeding, zoals andere tools op de site; bewerken en previewen zijn niet.
Wat het niet doet: het heeft geen em of rem eenheden, geen getypte getallenvelden, geen slepen-naar-reorden voor lagen, en geen aangepast lettertype in de preview Voor die, kopieer de verklaring en pas het aan in uw eigen stylesheet of browser dev tools.
Als het gewenste effect een wazig of opnieuw gekleurd element is in plaats van een schaduw, dan is CSS-filters zoals zoals drop-shadow() en blur() toepassen op hele elementen, inclusief afbeeldingen. Frosted panelen achter tekst zijn een taak voor de glassmorfismegenerator, en zachte geëxtrudeerde knoppen behoren tot de neumorfismegenerator. De volledige set visuele CSS-builders staat op de CSS tools hub, en de CSS gradiënt generator gids koppelt goed met teksteffecten wanneer u een verloopachtergrond achter een gloeiende titel wilt.
Een uitgewerkt voorbeeld: een leesbare heldentitel over een foto
Stel dat je witte 64px tekst hebt over een heldere strandfoto en de letters blijven verdwijnen in het zand Het doel is leesbaarheid eerst, stijl tweede.
Begin in de tekstschaduwtool met de Soft-preset: 0px 2px 4px #00000059. Op een te zwak beeld dat te druk is Verhoog de dekking tot 60% en vervaag tot 8px, wat geeft 0px 2px 8px #00000099. De randen scheiden zich van de achtergrond, maar dunne streken flikkeren nog steeds.
Voeg een tweede laag toe met nul offset, 2px vervaging en 50% zwart: 0px 0px 2px #00000080. Doordat je het als tweede toevoegde, schildert het achter de eerste laag, maar het omhelst de glyph-rand en geeft elke slag een dunne donkere rand Het resultaat is
.hero-title {
color: #fff;
font-size: 64px;
text-shadow: 0px 2px 8px #00000099, 0px 0px 2px #00000080;
}
Twee lagen, beide goedkoop om weer te geven, en de titel houdt stand op zand, lucht en surfen Op een telefoon waar de koers daalt naar 36px, zijn dezelfde pixelwaarden proportioneel zwaarder; converteren naar em houdt ze in de pas (0 0.03em 0.125em bij 64px).
