CSS-teksteffektgenerator

De fleste CSS-teksteffektgallerier gir deg en fast forhåndsinnstilling: én neonglød, én 3D-ekstrudering, ta den eller la den stå. Denne generatoren bygger CSS fra parameterne dine i stedet, på teksten du faktisk skriver. Velg neonglød, 3D-ekstrudering, boktrykk/preging, konturer eller gradientfyll fra effektvalget, juster den effektens egne kontroller, og live-forhåndsvisningen pluss den kopierbare CSS-blokken under oppdateres ved hver endring.

3D-ekstruderingseffekten er den som er verdt å forstå: for en valgt dybde (antall stablede lag) og vinkel, er lag i forskjøvet med i × cos(vinkel) horisontalt og i × sin(vinkel) vertikalt, beregnet i JavaScript med de virkelige trigonometriske funksjonene – ikke lest fra en oppslagstabell med forhåndsinnstilte vinkler. Ved 45 grader kommer de horisontale og vertikale forskyvningene like ut for hvert lag, fordi cosinus og sinus på 45° har samme verdi; roter vinkelglidebryteren og se hele bunken med "tekst-skygge"-lag svinge rundt bokstavene i sanntid, hver av dem ble mørkere litt mer enn den forrige for å falske et opplyst 3D-ansikt.

Neonglød stabler fire «tekstskygge»-lag med økende uskarphet i den valgte fargen, med en valgfri flimmer: slå den på og en «@keyframes»-regel med en tilfeldig sekvens av ugjennomsiktighetsfall blir generert og animert live, og en shuffle-knapp lar deg rulle mønsteret på nytt uten å skrive et eneste nøkkelbilde for hånd. Skissert tekst gjelder `-webkit-text-stroke` for nettlesere som støtter det, pluss en ærlig 8-retnings `text-shadow` fallback for de som ikke gjør det – begge linjene sendes i den kopierte CSS-en med en merknad om hvorfor. Gradient-fill klipper en `lineær-gradient` til tekstformen med `background-clip: text`, nå en standardegenskap med bred støtte, og beholder den eldre `-webkit-` prefikslinjen for eldre motorer.

Alt gjengis lokalt i nettleseren din – ingen tekst du skriver blir noen gang sendt hvor som helst. Kopier den ferdige CSS-blokken, inkludert `@keyframes`-regelen når effekten trenger en, rett inn i stilarket ditt.