CSS-texteffektgenerator

De flesta CSS-texteffektgallerier ger dig en fast förinställning: en neonglöd, en 3D-extrudering, ta den eller lämna den. Denna generator bygger CSS från dina parametrar istället, på den text du faktiskt skriver. Välj neonglöd, 3D-extrudering, boktryck/emboss, konturer eller gradient-fill från effektvalet, justera den effektens egna kontroller och liveförhandsvisningen plus det kopierbara CSS-blocket under den uppdateras vid varje ändring.

3D-extruderingseffekten är den som är värd att förstå: för ett valt djup (antal staplade lager) och vinkel, förskjuts lager i med i × cos(vinkel) horisontellt och i × sin(vinkel) vertikalt, beräknat i JavaScript med de verkliga trigonometriska funktionerna - inte avläst från en uppslagstabell med förinställda vinklar. Vid 45 grader blir de horisontella och vertikala förskjutningarna lika för varje lager, eftersom cosinus och sinus på 45° är samma värde; vrid vinkelreglaget och se hela stapeln med "text-skugga"-lager svänga runt bokstäverna i realtid, var och en mörknade lite mer än den förra för att fejka ett upplyst 3D-ansikte.

Neonglöd staplar fyra "text-skugga"-lager med ökande oskärpa i din valda färg, med ett valfritt flimmer: slå på det och en "@keyframes"-regel med en slumpmässig sekvens av opacitetsdippningar genereras och animeras live, och en shuffle-knapp låter dig rulla om mönstret utan att skriva en enda nyckelbildruta för hand. Den konturerade texten tillämpar `-webkit-text-stroke` för webbläsare som stöder det, plus en ärlig 8-riktnings `text-shadow` reserv för de som inte gör det – båda raderna skickas i den kopierade CSS med en anteckning om varför. Gradient-fill klipper en `linjär-gradient` till textformen med `background-clip: text`, nu en standardegenskap med brett stöd, och behåller den äldre `-webkit-` prefixet för äldre motorer.

Allt renderas lokalt i din webbläsare – ingen text du skriver skickas någonsin någonstans. Kopiera det färdiga CSS-blocket, inklusive regeln `@keyframes` när effekten behöver en, direkt in i din stilmall.