Generator efektów tekstowych CSS

Większość galerii efektów tekstowych CSS udostępnia gotowe ustawienia: jeden neonowy blask, jedno tłoczenie 3D, możesz to zrobić lub zostawić. Zamiast tego ten generator tworzy CSS na podstawie parametrów, na podstawie faktycznie wpisanego tekstu. Wybierz poświatę neonową, wytłoczenie 3D, typografię/wytłoczenie, wypełnienie konturowe lub gradientowe z wyboru efektu, dostosuj własne elementy sterujące tego efektu, a podgląd na żywo oraz znajdujący się pod nim blok CSS do kopiowania aktualizują się przy każdej zmianie.

Efekt wyciągnięcia 3D jest tym, który warto zrozumieć: dla wybranej głębokości (liczby ułożonych warstw) i kąta warstwa i jest przesunięta o i × cos(kąt) w poziomie i i × sin(kąt) w pionie, obliczone w JavaScript z rzeczywistymi funkcjami trygonometrycznymi — nie odczytywane z tabeli przeglądowej ustawionych kątów. Przy 45 stopniach przesunięcia poziome i pionowe są równe dla każdej warstwy, ponieważ cosinus i sinus 45° mają tę samą wartość; obróć suwak kąta i obserwuj, jak cały stos warstw „cieni tekstowych” obraca się wokół liter w czasie rzeczywistym, każda przyciemniona nieco bardziej niż poprzednia, aby udawać oświetloną twarz 3D.

Neonowa poświata układa cztery warstwy „cieni tekstowych” o rosnącym promieniu rozmycia w wybranym kolorze, z opcjonalnym migotaniem: włącz je, a reguła „@klatki kluczowe” z losową sekwencją spadków krycia zostanie wygenerowana i animowana na żywo, a przycisk losowania pozwala przerzucić wzór bez ręcznego zapisywania pojedynczej klatki kluczowej. Zakreślony tekst stosuje `-webkit-text-stroke` dla przeglądarek, które go obsługują, plus uczciwy 8-kierunkowy zastępczy `text-shadow` dla tych, które tego nie robią — obie linie są dostarczane w skopiowanym CSS z notatką wyjaśniającą dlaczego. Gradient-fill przycina „gradient liniowy” do kształtu tekstu za pomocą „background-clip: tekst”, obecnie standardowej właściwości z szerokim wsparciem, zachowując starszą linię z prefiksem „-webkit-” dla starszych silników.

Wszystko renderuje się lokalnie w Twojej przeglądarce — żaden wpisany tekst nie jest nigdzie wysyłany. Skopiuj gotowy blok CSS, łącznie z regułą `@keyframes`, jeśli efekt tego potrzebuje, bezpośrednio do arkusza stylów.