Generator de efecte de text CSS

Majoritatea galeriilor de efecte de text CSS vă oferă o presetare fixă: o strălucire neon, o extrudare 3D, luați-o sau lăsați-o. Acest generator construiește CSS-ul din parametrii dvs., în schimb, pe textul pe care îl tastați de fapt. Alegeți strălucire neon, extrudare 3D, tipografie/embosare, conturat sau gradient-umplere din selectarea efectului, ajustați propriile controale ale efectului, iar previzualizarea live plus blocul CSS copiabil de sub acesta se actualizează la fiecare modificare.

Efectul de extrudare 3D este cel care merită înțeles: pentru o adâncime aleasă (număr de straturi stivuite) și un unghi, stratul i este compensat cu i × cos (unghi) orizontal și i × sin (unghi) pe verticală, calculat în JavaScript cu funcțiile trigonometrice reale - nu citit dintr-un tabel de căutare a unghiurilor prestabilite. La 45 de grade decalajele orizontale și verticale ies egale pentru fiecare strat, deoarece cosinusul și sinusul de 45° au aceeași valoare; rotiți glisorul unghiular și urmăriți întregul teanc de straturi „text-shadow” care se rotesc în jurul literelor în timp real, fiecare întunecat puțin mai mult decât ultimul pentru a falsifica o față 3D iluminată.

Neon strălucire stivuiește patru straturi „text-umbră” cu raza de neclaritate crescândă în culoarea aleasă, cu o pâlpâire opțională: activați-o și o regulă „@keyframes” cu o secvență aleatorie de scăderi de opacitate este generată și animată în direct, iar un buton de amestecare vă permite să rerulați modelul fără a scrie manual un singur cadru cheie. Textul subliniat aplică `-webkit-text-stroke` pentru browserele care îl acceptă, plus o alternativă onest `text-shadow` în 8 direcții pentru cele care nu - ambele linii sunt livrate în CSS-ul copiat cu o notă despre motivul. Gradient-fill decupează un `gradient liniar` la forma textului cu `background-clip: text`, acum o proprietate standard cu suport larg, păstrând linia prefixată mai veche `-webkit-` pentru motoarele vechi.

Totul se redă local în browserul dvs. - niciun text pe care îl introduceți nu este trimis nicăieri. Copiați blocul CSS terminat, inclusiv regula „@keyframes” atunci când efectul are nevoie de unul, direct în foaia de stil.