CSS Szövegeffekt-generátor

A legtöbb CSS szövegeffekt-galéria egy fix beállítást ad: egy neonfényt, egy 3D kiemelést, vagy elfogadod, vagy nem. Ez a generátor a te paramétereidből építi fel a CSS-t, azon a szövegen, amit te írsz be. Válaszd ki a neonfény, 3D kiemelés, betűsüllyesztés/dombornyomás, körvonalas vagy színátmenetes kitöltés effektet a legördülőből, állítsd az adott effekt saját vezérlőit, és az élő előnézet, valamint az alatta lévő másolható CSS blokk minden változtatáskor frissül.

A 3D kiemelés effektet érdemes megérteni: egy adott mélységhez (egymásra rakott rétegek száma) és szöghez az i. réteget i × cos(szög) vízszintesen és i × sin(szög) függőlegesen toljuk el, JavaScriptben, a valódi trigonometrikus függvényekkel számítva — nem egy előre meghatározott szögek táblázatából olvasva. 45 foknál a vízszintes és függőleges eltolás minden rétegnél egyenlő, mert a 45° koszinusza és szinusza azonos; forgasd a szög csúszkát, és nézd, ahogy a `text-shadow` rétegek egész halma valós időben körbejár a betűk körül, mindegyik egy kicsit sötétebb az előzőnél, hogy egy megvilágított 3D-s felületet imitáljon.

A neonfény négy `text-shadow` réteget rak egymásra, növekvő elmosási sugárral, az általad választott színben, egy opcionális vibrálással: kapcsold be, és egy `@keyframes` szabály jön létre véletlenszerű átlátszóság-esések sorozatával, ami élőben animálódik, és egy keverő gombbal újra is sorsolhatod a mintát anélkül, hogy egyetlen keyframe-et kézzel kellene írnod. A körvonalas szöveg a `-webkit-text-stroke`-ot használja az azt támogató böngészőknél, plusz egy becsületes, 8-irányú `text-shadow` visszaeső megoldást azok számára, amelyek nem — mindkét sor belekerül a másolt CSS-be, egy magyarázó megjegyzéssel. A színátmenetes kitöltés egy `linear-gradient`-et vág a szöveg alakjára a `background-clip: text` tulajdonsággal, ami ma már szabvány és széles körben támogatott, és a régi `-webkit-` előtagú sor a régebbi motorok miatt marad bent.

Minden a böngésződben, helyben fut — semmilyen beírt szöveg nem kerül sehova. Másold ki a kész CSS blokkot, benne a `@keyframes` szabállyal, ha az effekt igényli, egyenesen a stíluslapodba.