Generátor textových efektov CSS

Väčšina galérií s textovým efektom CSS vám poskytne pevnú predvoľbu: jedna neónová žiara, jedna 3D extrúzia, vezmite alebo nechajte tak. Tento generátor namiesto toho vytvára CSS z vašich parametrov na texte, ktorý skutočne napíšete. Vyberte si neónovú žiaru, 3D-extrude, kníhtlač/reliéf, obrys alebo gradientovú výplň z výberu efektu, upravte vlastné ovládacie prvky efektu a živý náhľad plus kopírovateľný blok CSS pod ním sa aktualizuje pri každej zmene.

Efekt 3D vytláčania stojí za pochopenie: pre zvolenú hĺbku (počet na seba naskladaných vrstiev) a uhol je vrstva i posunutá o i × cos (uhol) horizontálne a i × sin (uhol) vertikálne, vypočítané v JavaScripte so skutočnými trigonometrickými funkciami – nečítané z vyhľadávacej tabuľky prednastavených uhlov. Pri 45 stupňoch sú horizontálne a vertikálne posuny rovnaké pre každú vrstvu, pretože kosínus a sínus 45° sú rovnaké; otáčajte posúvačom uhla a sledujte, ako sa celá hromada vrstiev „textových tieňov“ otáča okolo písmen v reálnom čase, pričom každá z nich stmavne o niečo viac ako tá posledná, aby napodobila rozsvietenú 3D tvár.

Neónová žiara spája štyri vrstvy „textového tieňa“ so zväčšujúcim sa polomerom rozmazania vo vami vybranej farbe s voliteľným blikaním: zapnite ho a pravidlo „@kľúčové snímky“ s náhodnou sekvenciou poklesov nepriehľadnosti sa vygeneruje a animuje naživo a tlačidlo pre náhodný výber vám umožní pretočiť vzor bez toho, aby ste museli ručne písať jedinú kľúčovú snímku. Načrtnutý text používa `-webkit-text-stroke` pre prehliadače, ktoré ho podporujú, plus poctivý 8-smerový `text-shadow` pre tie, ktoré ho nepodporujú – oba riadky sa dodávajú v skopírovanom CSS s poznámkou prečo. Gradient-fill orezáva „lineárny gradient“ do tvaru textu pomocou „background-clip: text“, teraz štandardnej vlastnosti so širokou podporou, pričom zachováva staršiu predponu „-webkit-“ pre staršie nástroje.

Všetko sa vykresľuje lokálne vo vašom prehliadači – žiadny text, ktorý zadáte, sa nikdy nikam neodošle. Skopírujte hotový blok CSS vrátane pravidla „@kľúčové snímky“, keď to efekt vyžaduje, priamo do šablóny so štýlmi.