Generator CSS tekstualnih efekata

Većina CSS galerija s tekstualnim efektima daje vam fiksne unaprijed postavljene postavke: jedan neonski sjaj, jedno 3D ekstrudiranje, uzmi ili ostavi. Ovaj generator umjesto toga gradi CSS iz vaših parametara na tekstu koji zapravo upisujete. Odaberite neonski sjaj, 3D ekstruziju, visoki tisak/utiskivanje, iscrtavanje ili gradijentnu ispunu iz odabira efekta, prilagodite vlastite kontrole tog efekta i pregled uživo plus kopirani CSS blok ispod njega ažurira se pri svakoj promjeni.

Efekt 3D ekstruzije je onaj koji vrijedi razumjeti: za odabranu dubinu (broj naslaganih slojeva) i kut, sloj i je pomaknut za i × cos(kut) vodoravno i i × sin(kut) okomito, izračunato u JavaScriptu sa stvarnim trigonometrijskim funkcijama — a ne čita se iz tablice pretraživanja unaprijed postavljenih kutova. Na 45 stupnjeva vodoravni i okomiti pomaci izlaze jednaki za svaki sloj, jer su kosinus i sinus od 45° iste vrijednosti; zakrenite kutni klizač i gledajte kako se cijeli niz slojeva `text-shadow` vrti oko slova u stvarnom vremenu, a svaki je potamnjen malo više od prethodnog kako bi lažirao osvijetljeno 3D lice.

Neonski sjaj slaže četiri sloja `text-shadow` sve većeg radijusa zamućenja u vašoj odabranoj boji, s izbornim titranjem: uključite ga i pravilo `@keyframes` s nasumičnim slijedom pada neprozirnosti generira se i animira uživo, a gumb za nasumičnu reprodukciju omogućuje vam ponovno okretanje uzorka bez ručnog pisanja jednog ključnog kadra. Ocrtani tekst primjenjuje `-webkit-text-stroke` za preglednike koji ga podržavaju, plus poštenu 8-smjernu zamjenu `text-shadow` za one koji ne podržavaju — oba retka se isporučuju u kopiranom CSS-u s napomenom zašto. Gradient-fill izrezuje "linearni gradijent" na oblik teksta s "background-clip: text", sada standardnim svojstvom sa širokom podrškom, zadržavajući stariji redak s prefiksom "-webkit-" za naslijeđene motore.

Sve se prikazuje lokalno u vašem pregledniku — tekst koji upisujete nikada se nigdje ne šalje. Kopirajte gotov CSS blok, uključujući pravilo `@keyframes` kada ga efekt treba, ravno u svoju tablicu stilova.