24.09.2021
f0b0b5afb7a5fc13665b80092c301eee

Как создать неоновый текст с помощью CSS

Как сделать неоновый текст с помощью CSS

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

Вот что мы будем делать:

Как сделать неоновый текст с помощью CSS

Добавление эффекта свечения к тексту

Во-1-х, давайте заставим текст светиться. Это можно сделать в CSS с помощью характеристики text-shadow. Что полезно в text-shadow, так это то, что мы можем применить к нему несколько теней, просто разделив их запятыми:

CSS

text-shadow просит четырех значений, первые два из которых представляют горизонтальное и вертикальное положение тени соответственно. Третье значение представляет размер радиуса размытия, а последнее значение представляет цвет тени. Чтоб увеличить размер эффекта свечения, мы бы прирастили третье значение, которое представляет радиус размытия. Либо, выражаясь по-другому:

CSS

Вот что мы получаем с помощью этого маленького фрагмента CSS:

Последующее, что вам может быть интересно, — что случилось со всеми этими значенями? Как я их получил и почему их так много? Во-1-х, мы добавили эффекты белого свечения к наружным краям букв текста с небольшим радиусом размытия.

CSS

Последние 5 значений — это более широкие тени текста с огромным радиусом размытия, образующие зеленое свечение.

CSS

Было бы здорово, если бы мы могли достигнуть этого с менее чем пятью тенями, но нам необходимы все эти тени, чтобы их можно было накладывать друг на друга, чтоб добавить больше глубины свечению. Если бы заместо этого мы использовали одиночный text-shadow, эффект не имел бы глубины, нужной, чтобы он выглядел реалистично.

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

Эффект «мигания»

Одна вещь, которую вы сможете заметить в неоновых надписях — это то, что некие из них, особенно старые, имеют тенденцию мелькать. Свет как то появляется и угасает. Мы можем делать то же самое с анимацией CSS! Давайте создадим анимацию @keyframes, которая включает и выключает свет резвыми, казалось бы, случайными вспышками.

CSS

Это вправду так! Мы взяли те же характеристики text-shadow и значения, которые были у нас ранее, обернули их в анимацию @keyframes и избрали точки на временной шкале для внедрения теней, а также точки, которые стопроцентно удаляют тени.

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

CSS

Обратите внимание: если мы желаем, чтобы весь текст мерцал, мы могли бы удалить значения text-shadow в классе .neonText, добавить к нему анимацию и позволить @keyframes применить тени.

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

Давайте изучим те и другие эффекты!

Пульсирующее свечение

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

Мы желаем, чтобы размер радиуса размытия был минимальным в конце анимации, поэтому мы просто уменьшаем значения радиуса размытия для каждого значения text-shadow до 0% в главном кадре. Таким образом, размер размытия равномерно уменьшается и уменьшается, создавая эффект пульсации.

CSS

Еще раз добавляем анимацию к какому-нибудь элементу. Мы опять добавим к h1:

CSS

И все совместно:

Легкое мигание

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

CSS

Так как мерцание более легкое, а уменьшение радиуса размытия не такое огромное, мы должны увеличить количество раз, которое эта анимация происходит в секунду, чтоб имитировать более частое мерцание. Это можно сделать, уменьшив длительность анимации, скажем, до 0.11с:

CSS

Внедрение фонового изображения

Было бы здорово, если бы наш текст висел на стенке, а не на пустом месте. Давайте возьмем для этого фоновое изображение, может быть, какую-то кирпичную текстуру из Unsplash либо что-то в этом роде:

CSS

Добавление границы

Последняя деталь, которую мы можем добавить, — это собственного рода круглая или прямоугольная рамка вокруг текста. Это просто неплохой способ обрамить текст и сделать его схожим на настоящую подпись. Добавляя тень к границе, мы можем придать ей таковой же неоновый эффект, как и тексту!

Какой бы элемент ни был контейнером для текста, нужна граница. Допустим, мы работаем только с элементом h1. Мы вызываем свойство border, чтоб создать сплошную белую рамку вокруг заголовка, плюс незначительный отступ, чтобы дать тексту немного места:

CSS

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

CSS

Сейчас text-shadow не сработает для границы, но это нормально, поэтому что для этого предназначено свойство box-shadow. Синтаксис очень похож, потому мы можем взять то, что у нас есть, и незначительно изменить значения:

CSS

Обратите внимание на ключевое слово inset? Это то, что нереально сделать с text-shadow, но добавление inset к границе box-shadow позволяет нам получить свечение по обе стороны границы для более близкой к реальности глубины.

А как насчет доступности?

Если юзеры предпочитают ограниченное отображение, нам нужно будет учитывать это с помощью медиа-запроса prefers-reduced-motion. Это позволяет нам удалить эффекты анимации, чтоб сделать текст более доступным для тех, кто предпочитает ограниченное отображение.

К примеру, мы могли бы изменить мигающую анимацию, чтоб пользователи, которые включили prefers-reduced-motion, не лицезрели анимацию. Напомним, что мы применили эффект мерцания только к элементу h1, поэтому отключим анимацию для этого элемента:

CSS

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

Заключение

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

По материалам webformyself.com

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

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