Генератор на CSS текстови ефекти

Повечето галерии с CSS текстови ефекти ви предоставят фиксирана настройка: едно неоново сияние, едно 3D екструдиране, вземете или оставете. Вместо това този генератор изгражда CSS от вашите параметри върху текста, който всъщност въвеждате. Изберете неоново сияние, 3D екструдиране, висок печат/щамповане, очертан или градиентно запълване от избора на ефект, коригирайте собствените контроли на този ефект и визуализацията на живо плюс копирания CSS блок под него се актуализират при всяка промяна.

Ефектът на 3D екструдиране е този, който си струва да се разбере: за избрана дълбочина (брой подредени слоеве) и ъгъл слой i се компенсира с i × cos(ъгъл) хоризонтално и i × sin(ъгъл) вертикално, изчислено в JavaScript с реалните тригонометрични функции — не се чете от справочна таблица с предварително зададени ъгли. При 45 градуса хоризонталното и вертикалното отместване излизат равни за всеки слой, тъй като косинус и синус от 45° са еднакви стойности; завъртете плъзгача за ъгъл и гледайте как целият набор от слоеве „текстова сянка“ се върти около буквите в реално време, като всеки е потъмнял малко повече от предишния, за да фалшифицира осветено 3D лице.

Неоновото сияние подрежда четири слоя „текстова сянка“ с нарастващ радиус на замъгляване в избрания от вас цвят, с опционално трептене: включете го и правилото „@keyframes“ с произволна последователност от спадове на непрозрачността се генерира и анимира на живо, а бутонът за разбъркване ви позволява да превъртате шаблона, без да пишете нито един ключов кадър на ръка. Очертаният текст прилага `-webkit-text-stroke` за браузъри, които го поддържат, плюс честен 8-посочен `text-shadow` резервен вариант за тези, които не го правят — и двата реда се доставят в копирания CSS с бележка защо. Gradient-fill изрязва „линеен градиент“ към текстовата форма с „background-clip: text“, което вече е стандартно свойство с широка поддръжка, запазвайки по-стария ред с префикс „-webkit-“ за наследени машини.

Всичко се изобразява локално в браузъра ви - никакъв текст, който въвеждате, никога не се изпраща никъде. Копирайте готовия CSS блок, включително правилото `@keyframes`, когато ефектът има нужда от такова, направо във вашата таблица със стилове.