CSS-teksteffektgenerator

De fleste CSS-teksteffektgallerier giver dig en fast forudindstilling: én neonglød, én 3D-ekstrudering, tag den eller lad den være. Denne generator bygger i stedet CSS'en ud fra dine parametre på den tekst, du faktisk skriver. Vælg neonglød, 3D-ekstrudering, bogtryk/prægning, kontur eller gradient-fyld fra effektvælgeren, juster effektens egne kontroller, og live-eksemplet plus den kopierbare CSS-blok under den opdateres ved hver ændring.

3D-ekstruderingseffekten er den, der er værd at forstå: For en valgt dybde (antal stablede lag) og vinkel er lag i forskudt med i × cos(vinkel) horisontalt og i × sin(vinkel) lodret, beregnet i JavaScript med de rigtige trigonometriske funktioner - ikke læst fra en opslagstabel med forudindstillede vinkler. Ved 45 grader er de vandrette og lodrette forskydninger ens for hvert lag, fordi cosinus og sinus på 45° er den samme værdi; drej vinkelskyderen og se hele stakken af ​​"tekst-skygge"-lag svinge rundt om bogstaverne i realtid, hver af dem blev mørkere lidt mere end sidst for at falske et oplyst 3D-ansigt.

Neon-glød stabler fire "tekst-skygge"-lag med stigende sløringsradius i din valgte farve, med et valgfrit flimmer: slå det til, og en "@keyframes"-regel med en tilfældig sekvens af opacitetsfald genereres og animeres live, og en shuffle-knap lader dig rulle mønsteret om uden at skrive en enkelt keyframe i hånden. Skitseret tekst gælder "-webkit-text-stroke" for browsere, der understøtter det, plus en ærlig "text-shadow" i 8 retninger for dem, der ikke gør det - begge linjer sendes i den kopierede CSS med en note om hvorfor. Gradient-fill klipper en "lineær gradient" til tekstformen med "baggrundsklip: tekst", nu en standardegenskab med bred understøttelse, og beholder den ældre "-webkit-"-præfikslinje for ældre motorer.

Alt gengives lokalt i din browser - ingen tekst, du skriver, sendes nogensinde nogen steder. Kopier den færdige CSS-blok, inklusive reglen `@keyframes`, når effekten har brug for en, direkte ind i dit stylesheet.