Домашняя » кодирование » 15 красивых текстовых эффектов, созданных с помощью CSS

    15 красивых текстовых эффектов, созданных с помощью CSS

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

    И чтобы проиллюстрировать это, мы собрали 15 потрясающих и интересных текстовых эффектов, которые стали возможны с помощью CSS (некоторые с небольшой помощью из кодов Javascript).

    Для больше вещей, которые вы можете сделать с CSS, проверьте:

    • 18 классных вещей, в которые вы не поверите, были созданы с использованием CSS
    • 30 библиотек текстовых эффектов jQuery, которые вы должны знать
    • Как создать форму сердца с помощью CSS
    • Animate.css - библиотека CSS3 для простого создания анимации

    Эластичный удар Анимация

    Yoksel оживляет обводку текста с помощью крутой цветовой гаммы. Этот эффект сделан с CSS и SVG. Результат потрясающий!

    SVG Glitch

    Хотите сделать эффекты, которые похожи на сломанный аналоговый телевизор? Дирк Вебер сделал этот потрясающий эффект сбоев, используя CSS и SVG фильтр.

    Логотип Shop Talk

    Логотип Shop Talk воссоздан Hugo с использованием только CSS. Логотип выглядит аналогично оригиналу, в комплекте с правильной текстурой.

    Разбитый эффект

    Эта идея от Robet Messerle дает эффект нарезки ножом, выполненный с использованием менее чем 70 строк CSS.

    Элегантный эффект тени

    Эффект Long Shadow приходит к тексту, сделанному с помощью CSS. Создатель, Хуан Брухо, сделал еще 4 эффекта, но это, пожалуй, самый впечатляющий.

    Туманный текстовый эффект

    Андреас создает потрясающий кинематографический эффект тумана. Применимо только в браузерах Webkit.

    Текстовая маска SVG

    Дизайн Marco Barria демонстрирует элегантный эффект маскировки текста на большом фоновом изображении.

    Анимация текста

    Йоанн создала потрясающий эффект тикера с помощью этой текстовой анимации. Посмотрите, как второе слово чередуется между тремя словами.

    Упасть на пол

    Этот 3D-эффект от ThatGuySam - простая игра с тенями текста, но с потрясающим результатом..

    Фоновый текст клипа

    Jintos играл с фоновым клипом Webkit, чтобы добавить фоновое изображение в текст. Он сделал 16 классных творений, используя этот метод.

    CSS Text-FX

    Моклик добавил к тексту эффект тусклого света, давая вам прерывистые вспышки, которые издалека предупреждают об опасности.

    Анимированная подпись подписи

    Гэри Хептинг создал анимацию подписи в реальном времени. Это работает путем применения Javascript к пути SVG для анимации подписи.

    Красочный Glitchy 404

    Слышите ли вы звук этого глюка и почувствуете вибрацию в своей голове? Вот как хорош этот глюк с эффектом. mistic100 сделан с CSS плюс немного Javascript.

    космос

    Теперь это элегантный и вдохновляющий логотип. Это также подходит для использования для “космос”, потому что орбиты, получить его?

    загрузка

    Крутой эффект загрузки, который просто скрывает и отображает буквы.