Генератор CSS-ефектів для тексту
Введіть власний текст і перегляньте наживо справжні ефекти неонового світіння, 3D-екструзії, тиснення, обведення та градієнтної заливки CSS — з параметрами, обчисленими реальною математикою, та готовим блоком CSS.
Результат
Більшість галерей CSS-ефектів для тексту дають вам фіксований пресет: одне неонове світіння, одна 3D-екструзія — і все. Цей генератор натомість будує CSS із ваших параметрів на тексті, який ви справді вводите. Оберіть неонове світіння, 3D-екструзію, тиснення/рельєф, обведення чи градієнтну заливку зі списку ефектів, налаштуйте елементи керування саме цього ефекту — і живий перегляд разом із готовим блоком CSS нижче оновляться на кожну зміну.
3D-екструзія — ефект, який варто зрозуміти детальніше: для обраної глибини (кількості шарів, що накладаються) і кута шар i зміщується на i × cos(кут) по горизонталі та i × sin(кут) по вертикалі, обчислені в JavaScript справжніми тригонометричними функціями — а не зчитані з таблиці готових кутів. При 45 градусах горизонтальне й вертикальне зміщення виходять однаковими для кожного шару, бо косинус і синус 45° мають те саме значення; потягніть повзунок кута — і весь стек шарів text-shadow обертається навколо літер у реальному часі, причому кожен наступний шар трохи темніший за попередній, імітуючи освітлену 3D-грань.
Неонове світіння накладає чотири шари text-shadow зі зростаючим радіусом розмиття у вибраному кольорі, з опціональним мерехтінням: увімкніть його — і генерується правило @keyframes із випадковою послідовністю провалів прозорості, яке одразу анімується, а кнопка перегенерації дозволяє перетасувати шаблон без ручного написання жодного keyframe. Обведений текст застосовує -webkit-text-stroke для браузерів, що його підтримують, плюс чесний 8-напрямковий запасний контур на text-shadow для тих, що ні — обидва рядки потрапляють у скопійований CSS з поясненням чому. Градієнтна заливка обрізає linear-gradient за формою тексту через background-clip: text — тепер стандартну властивість із широкою підтримкою, зберігаючи старіший рядок із префіксом -webkit- для застарілих рушіїв.
Усе рендериться локально у вашому браузері — жоден введений текст нікуди не надсилається. Скопіюйте готовий блок CSS, включно з правилом @keyframes, коли ефект його потребує, прямо у свою таблицю стилів.
Дані не залишають ваш пристрій. Конвертація відбувається на клієнті в межах браузера. Безпека гарантована.
Нюанси та Формати
- П'ять справжніх ефектів — неонове світіння, 3D-екструзія, тиснення/рельєф, обведення та градієнтна заливка — кожен зі своїми елементами керування (кольори, повзунки глибини/кута, кольори градієнта).
- Неонове світіння має опціональну анімацію мерехтіння з випадковим шаблоном прозорості в @keyframes, який можна перегенерувати без ручного написання CSS.
- 3D-екструзія дозволяє незалежно тягнути глибину (кількість шарів) і кут; зміщення пікселів і поступово темніший відтінок кожного шару перераховуються наживо.
Наші переваги
Сценарії використання
- • Підберіть вигляд неонової вивіски для заголовка лендінгу, увімкніть анімацію випадкового мерехтіння і скопіюйте готовий text-shadow разом із блоком @keyframes.
- • Встановіть глибину 3D-екструзії 8 і кут 30 градусів для об'ємного ізометричного логотипа, а потім скопіюйте обчислений стек text-shadow прямо у свою таблицю стилів.
- • Створіть обведений заголовок з рядком -webkit-text-stroke і запасним text-shadow одночасно, щоб обведення відображалося навіть у браузерах без підтримки stroke.
Оцініть інструмент
