Generátor textových efektů CSS

Většina galerií s textovými efekty CSS vám poskytne pevnou předvolbu: jedna neonová záře, jedno 3D vysunutí, ber nebo nech být. Tento generátor místo toho vytváří CSS z vašich parametrů na textu, který skutečně napíšete. Vyberte neonovou záři, 3D vysunutí, knihtisk/reliéf, obrys nebo přechodovou výplň z výběru efektu, upravte vlastní ovládací prvky efektu a živý náhled plus kopírovatelný blok CSS pod ním se aktualizují při každé změně.

Efekt 3D vysunutí je ten, který stojí za pochopení: pro zvolenou hloubku (počet naskládaných vrstev) a úhel je vrstva i posunuta o i × cos (úhel) vodorovně a i × sin (úhel) svisle, vypočítané v JavaScriptu se skutečnými goniometrickými funkcemi – nečte se z vyhledávací tabulky přednastavených úhlů. Při 45 stupních jsou horizontální a vertikální posuny stejné pro každou vrstvu, protože kosinus a sinus 45° jsou stejné hodnoty; otáčejte úhlovým posuvníkem a sledujte, jak se celá hromada vrstev „textových stínů“ houpe kolem písmen v reálném čase, přičemž každá z nich ztmavla o něco více než ta poslední, aby napodobila osvětlený 3D obličej.

Neonová záře naskládá čtyři vrstvy „textového stínu“ se zvětšujícím se poloměrem rozostření ve vámi zvolené barvě, s volitelným blikáním: zapněte jej a pravidlo „@klíčové snímky“ s náhodnou sekvencí poklesu krytí bude vygenerováno a živě animováno, a tlačítko pro náhodné přehrávání vám umožní přetočit vzorek, aniž byste museli ručně psát jediný klíčový snímek. Nastíněný text používá `-webkit-text-stroke` pro prohlížeče, které jej podporují, plus poctivý 8směrný `text-shadow` pro ty, které to nepodporují – oba řádky se dodávají v zkopírovaném CSS s poznámkou proč. Gradient-fill ořízne `lineární gradient` do tvaru textu pomocí `background-clip: text`, což je nyní standardní vlastnost s širokou podporou, přičemž zachovává starší předponu `-webkit-` pro starší motory.

Vše se vykresluje lokálně ve vašem prohlížeči – žádný text, který zadáte, se nikdy nikam neodešle. Zkopírujte hotový blok CSS, včetně pravidla „@klíčové snímky“, pokud to efekt vyžaduje, přímo do své šablony stylů.