Css красивый текст: 61 CSS-эффект для текста — Записки преподавателя

О коде

SCSS 3D Text Mixin

Это простой миксин SCSS, который создает трехмерный блочный текст с помощью CSS text-shadow .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

3D-текст CSS

3D текстовый эффект в CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Текстовая область

3D-текст Эффект выделения в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Простой 3D текстовый эффект

Перекошенный и повернутый текст.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Анимированный 3D-текст

Только текстовый эффект 3D волны CSS.

Совместимые браузеры: Chrome, Opera, Safari

Зависимости: —

О коде

Многоуровневые шрифты в CSS

Текстовые эффекты CSS с многоуровневыми шрифтами.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Разноцветный 3D текстовый эффект

Отдельный элемент с разноцветным текстом и 3D-текстом теневые эффекты.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Линии и многоуровневые текстовые эффекты CSS

Текстовые эффекты CSS с многоуровневыми шрифтами. Просто поэкспериментируйте с различными свойствами CSS для создания забавных текстовых эффектов 🙂

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Только CSS Текстовый эффект 3D-сгиба бумаги

Попытка создать эффект складывания бумаги с текстом так, чтобы он выглядел так, как будто он отрывается от страницы.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

3D-текст CSS

3D-текст с тенями в соответствии с принципом PS прежних дней для построения 3D-текста слой за слоем, причем последний с непрозрачностью находится над основной позицией.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Затененный текст

Затененный текст, эксперимент SVG + CSS3 с анимированными тенями.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

CSS Perspective Text Hover

Эксперимент с использованием веб-шрифтов в сочетании с инструментами трехмерного преобразования CSS.
Сделано Джеймсом Босвортом
22 августа 2016 г.

скачать демо и код

О коде

3D обводка текста

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Peeled Text Transforms

Это перо показывает текст, который выглядит так, как будто он отделен от страницы. Имеет плавную анимацию при наведении.
Автор Michiel Bijl
25 ноября 2014 г.

скачать демо и код

О коде

Освещение и тени для 3D-текста

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

3D CSS-типографика

Чистая анимация CSS Трехмерный текст .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

3D-текст — только CSS

Текстовый эффект 3D-выдавливания — только CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

3D-текст

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

3D-текст

Миксин SCSS для создания реалистичного 3D-текста.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Текст с наклоном и сдвигом

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

3D-текст CSS

Добавьте к тексту «настоящий» 3D-эффект (в очках). Можно также работать с другими элементами, используя

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Вспышка

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

7 анимаций прокрутки текста [CSS и JS]

Много лет назад анимация прокрутки текста (или любой тип анимации текста CSS) была везде в Интернете. Их было легко настроить с помощью устаревшего тега … и люди воспользовались этим.

Прокрутка текста могла начать свою жизнь как забавная и причудливая функция веб-сайтов… но вскоре она стала избитой и надоедливой характеристикой просмотра! Люди восстали против этого в большой степени. Фактически, TechRepublic однажды описал их как «предмет сильной ненависти», «отвратительное существо» и «фигуру насмешек».

Ой! И это было еще в 2007 году.

Суд общественного мнения вынес свой вердикт — анимации прокрутки текста были виновны , в преступлениях против пользовательского опыта! Предложение? Изгнание! Изгнание! Его HTML-теги будут объявлены устаревшими, и он будет брошен в ту же яму, в которую был брошен комикс, чтобы его можно было увидеть только на странице вашего дяди Боба в Geocities, которую он забыл удалить.

Но сегодня я хочу вновь открыть дело и представить новые улики. Суд идет, всем вставать!

• Дело против анимации прокрутки текста
• 7 анимаций прокрутки

Дело против анимации прокрутки текста

См. перо на КодПене.

Чтобы защитить прокручиваемый текст, мы должны понять аргументы против него и разработать контрмеры. Основные претензии к нему:

1. Это раздражает
2. Это отвлекает ваше внимание от других частей страницы
3. Это чертовски медленно! Для того, чтобы текст появился на экране, требуется aaaaaaages.
   Ты сидишь там, стучишь кулаками по столу, ждешь сообщения, кричишь: «ДАВАЙТЕ, БЛИН ТЕБЯ! (Или это может быть только я. Не волнуйтесь, требуется профессиональная помощь.)
4. Выглядит… старым. Упражняться. Усталый. Использовал.

Итак, если мы хотим избежать этих ловушек, мы должны следовать этим золотым правилам:

Используйте прокручиваемый текст очень, очень экономно

Не перегружайте страницы прокручиваемым текстом, иначе ваш сайт будет выглядеть как страница MySpace 2004 года. неприятный привкус во рту. Вы можете рассмотреть возможность активации прокрутки только при наведении курсора мыши.

Не используйте его рядом с ключевым содержанием

Не используйте его, когда на странице есть что-то более важное, к чему вы хотите привлечь внимание посетителя, например, CTA, ключевое преимущество продукта или что-то в этом роде. Используйте анимацию, чтобы привлечь внимание туда, где вы хотите, а не далеко откуда вы хотите.

Из этого правила есть исключение — когда ключевой контент находится на другом носителе — например, аудио или видео. Ярким примером этого являются новости на телевидении — они часто показывают заголовки, прокручивающиеся внизу, в то время как показывается основной новостной репортаж.

Не прокручивать ключевое содержимое

Не размещайте ключевое содержимое, которое вы хотите, чтобы посетитель прочитал, в прокручиваемом тексте. Если вы сделаете это, вы заставите их читать с определенной скоростью, а не с той скоростью, которую они хотят. Лишение контроля посетителей только расстроит их.

Смотрите, прокрутка текста отлично работает на вокзале, где табло имеет ограниченную ширину, а в поезде 24 остановки. Но на веб-сайте у вас есть столько места, сколько вам нужно. Используй это!

Так что же тогда вставлять в прокручиваемый текст? Что ж, либо сделайте текст очевидным/фоном/дополнительной информацией, либо разрешите им управлять прокруткой каким-либо образом (например, с помощью колесика мыши)

Сделайте его уникальным, забавным, новым или умным.

В принципе, избегайте анимации прокрутки текста на обычном тексте, если только это не используется в пародийных целях, как в примере с несколькими хорошими людьми выше.

Если вы можете выполнить эти 4 условия, прокрутка текста дает вам ключевое преимущество — никто другой этого не делает, так что это может помочь вам выделиться из толпы!

Хорошо, у нас есть готовые контрмеры для аргументов обвинения. Теперь пришло время представить дело защите.

Итак, ваша честь, я представляю 7 анимаций прокрутки текста для вашего веб-сайта, которые при продуманном использовании и в правильном проекте могут работать очень хорошо!

1. Анимация прокрутки радиотекста

Вот классный пример от Tiffany Rayside, использующий прокрутку текста как новинку. Конечно, прокрутка текста существовала задолго до появления Интернета, и раньше (а иногда и сейчас!) для этого использовалась сетка из лампочек или светодиодов. Эта анимация прекрасно имитирует этот эффект.

См. перо на КодПене.

Когда вы думаете об анимации прокрутки текста, вы, вероятно, думаете о предложениях, верно? Но почему бы просто не прокрутить одно слово? Взгляните на этот пример Роэля Кувенберга:

См. перо на КодПене.

Обратите внимание, что это позволяет избежать основных проблем с прокруткой текста. Он не предоставляет ключевой контент, и вы сразу получаете то, что он вам говорит. Это также не слишком отвлекает, так как движется только одно слово. Это может быть идеально на целевой странице продукта, возможно, при прокрутке 3-4 уникальных торговых точек продукта, состоящих из одного слова, чтобы пользователь сразу понял, какую пользу он может им принести.

Итак, мы попробовали прокручивать отдельные слова, давайте сделаем еще один шаг!

Эта ручка от Jhey имеет ряд классных и умных текстовых эффектов, которые вы могли бы попробовать, но я хотел бы обратить ваше внимание на пример SLOTS. Кто сказал, что слова нужно прокручивать целиком? Вы можете прокручивать отдельные буквы! Это может хорошо работать на сайте азартных игр или, возможно, в статье об азартных играх.

См. перо на КодПене.

С этой анимацией нам не нужно беспокоиться о пункте 3 выше, потому что вы всегда можете видеть полное слово. Однако мы do нужно побеспокоиться о пунктах 1 и 2 — это может раздражать и отвлекать внимание от более важных вещей. Веский довод для активации только при наведении курсора мыши.

4. Экстренные новости

Как отмечалось выше, анимация прокрутки текста имеет место, когда основным контентом сайта является , а не текст, то есть видео или аудио. И классический пример этого — заголовки «Последние новости», которые вы видите на новостных каналах. Вот реализация этого на чистом CSS от Нейта Левина:

См. перо на КодПене.

Скорость по умолчанию немного высока, на мой вкус, но вы можете настроить скорость прокрутки текста с помощью свойства animation классов ticker-news и ticker-title . И вы, вероятно, захотите удалить логотип «5» или заменить его своим собственным!

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

5. Прокручиваемый фоновый текст

Вся критика прокручиваемого текста применима, когда текст находится на переднем плане — когда он является основным элементом дизайна сайта. Перемещение на задний план решит проблемы? Что ж, взгляните на эту ручку [https://codepen.io/Praefect] (Фрэнк Талора) и решите сами:

См. перо на КодПене.

Как и в предыдущем примере, текст, который вы будете использовать в этой ситуации, не должен быть ключевым — это не должен быть ваш посетитель нужно для чтения. Это может быть даже название вашего бренда или слоган (например, Apple может поместить здесь «Думай иначе». Вам нужно будет только увидеть «Думай D», прежде чем вы получите сообщение).

6. Анимация прокрутки текста в стиле «Звездных войн»

Это так круто! Тим Пьетруски чертовски любит «Звездные войны», но он не смог найти веб-версию этого культового бегущего текста из оригинального фильма 1977 года. Итак, он сделал один, и вот он! Он даже включил музыку… ах, этот вступительный аккорд вызывает ностальгию, не так ли? (Я так понимаю, это си-бемоль мажор, если вам интересно).

См. перо на КодПене.

Если вы хотите дать своим посетителям дозу «Звездных войн», это может быть правильным выбором. Но помните золотые правила. Будьте осторожны с критическим текстом здесь, и если вы действительно хотите это сделать, было бы лучше, чтобы пользователь мог контролировать скорость прокрутки текста с помощью мыши.

Говоря об этом…

7. Предоставьте пользователю контроль над анимацией прокручиваемого текста

Возможно, основная причина того, что прокручиваемый текст раздражает, заключается в том, что он отнимает у нас контроль. Но… если вы вернете читателю этот контроль, большинство проблем с прокруткой текста исчезнет.

Прекрасным примером этого является веб-сайт под названием «Объяснение начала». Когда вы прокручиваете страницу вниз, появляется и исчезает текст, объясняющий сложный сюжет популярного фильма Кристофера Нолана. При прокрутке вверх предыдущий текст возвращается в поле зрения. У вас есть полный контроль. Это довольно круто.

Но как бы вы соорудили что-то подобное? Что ж, сайт фактически представляет собой полностраничный сайт, где каждый «уровень», через который проходят персонажи в фильме, представлен отдельной полной страницей сайта. Текст, который появляется и исчезает из поля зрения, появляется при прокрутке в пределах на каждой полной странице.

Что-то вроде этого было бы идеальным вариантом использования для fullPage.js. fullPage — это JS-библиотека, которая помогает вам создавать полностраничные сайты! Он дает вам массу способов плавного перехода с одной страницы на другую, и даже есть поддержка элементов прокрутки на страницах, которые вы можете использовать для создания эффектов, аналогичных начальному сайту.

А если вы используете WordPress, React или Vue и думаете: «Будет ли это работать вместе с моими любимыми инструментами?», ответ — да, без проблем!

Взгляните на несколько примеров того, что может сделать fullPage. Как вы можете использовать эти функции в своих проектах?

• Потрясающие анимированные фоны с чистым CSS
• Классные CSS-анимации для добавления на сайт
• Лучшие эффекты наведения CSS
• Календари CSS

Об авторе:

Уоррен Дэвис — фронтенд-разработчик из Великобритании.

No related posts.

alexxlab Автор записи

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт