Генератор CSS текстуалних ефеката

Већина галерија CSS текстуалних ефеката вам нуди фиксну пресету: један неонски сјај, једну 3Д екструзију, узми или остави. Овај генератор уместо тога гради CSS из ваших параметара, на тексту који унесете. Изаберите неонски сјај, 3Д екструзију, утискивање/рељеф, контуру или градијентну испуну из бирача ефеката, прилагодите сопствене контроле тог ефекта, и уживо приказ плус CSS блок испод за копирање се ажурирају на сваку промену.

Ефекат 3Д екструзије вреди разумети: за изабрану дубину (број наслаганих слојева) и угао, слој i се помера за i × cos(угла) хоризонтално и i × sin(угла) вертикално, израчунато у JavaScript-у правим тригонометријским функцијама — не чита се из табеле пресетних углова. Под 45 степени хоризонтални и вертикални помераји излазе једнаки за сваки слој, јер су косинус и синус од 45° иста вредност; ротирајте клизач угла и посматрајте како се цео скуп `text-shadow` слојева клати око слова у реалном времену, сваки потамњен мало више од претходног да би имитирао осветљену 3Д површину.

Неонски сјај ређа четири `text-shadow` слоја све већег радијуса замућења у вашој изабраној боји, са опционим треперењем: укључите га и генерише се и анимира уживо `@keyframes` правило са насумичним низом падова прозирности, а дугме за мешање вам омогућава да изнова бацате шаблон без писања иједног кључног кадра ручно. Контурисани текст примењује `-webkit-text-stroke` за прегледаче који га подржавају, плюс искрену 8-смерну `text-shadow` резервну варијанту за оне који не подржавају — обе линије се испоручују у копираном CSS-у са напоменом зашто. Градијентна испуна исеца `linear-gradient` на облик текста помоћу `background-clip: text`, што је сада стандардно својство са широком подршком, задржавајући старију `-webkit-` префиксну линију за застареле покретаче.

Све се приказује локално у вашем прегледачу — ниједан текст који унесете се нигде не шаље. Копирајте готов CSS блок, укључујући и `@keyframes` правило када га ефекат захтева, директно у ваш стилски лист.