Неоновый текст может добавить приятный футуристический штрих любому веб-сайту. Мне всегда нравилась магия неоновых вывесок, и я захотел воссоздать их с помощью CSS.
Я подумал, что поделюсь несколькими советами, как это сделать! В этой статье мы рассмотрим, как добавить к тексту эффекты свечения. Мы также рассмотрим различные способы анимации неоновых вывесок с использованием CSS.
Добавление эффекта свечения к тексту
Во-первых, давайте заставим текст светиться. Это можно сделать в CSS с помощью свойства text-shadow. Что хорошо в text-shadow, так это то, что мы можем применить к нему несколько теней, просто разделив их запятыми:
text-shadow требует четыре значения, первые два из которых представляют горизонтальное и вертикальное положение тени соответственно. Третье значение представляет размер радиуса размытия, а последнее значение представляет цвет тени. Чтобы увеличить размер эффекта свечения, мы бы увеличили третье значение, которое представляет радиус размытия. Или, выражаясь иначе:
text-shadow: [x-offset] [y-offset] [blur-radius] [color];
Вот что мы получаем с помощью этого небольшого фрагмента CSS:
https://codepen.io/silvia-odwyer/pen/MWJVaqm
Следующее, что вам может быть интересно, что случилось со всеми этими значениями? Как я их получил и почему их так много?
Во-первых, мы добавили эффекты белого свечения к внешним краям букв текста с небольшим радиусом размытия.
Последние пять значений - это более широкие тени текста с большим радиусом размытия, образующие зеленое свечение.
Было бы здорово, если бы мы могли добиться этого с менее чем пятью тенями, но нам нужны все эти тени, чтобы их можно было накладывать друг на друга, чтобы добавить больше глубины свечению. Если бы вместо этого мы использовали одну текстовую тень, у эффекта не было бы глубины, необходимой для того, чтобы он выглядел реалистично.
Смотрим результат на CodePen:
https://codepen.io/silvia-odwyer/pen/MWJVaqm
Продолжайте экспериментировать с различными оттенками и цветами, а также с размерами радиуса размытия! Вы можете создать огромное количество классных эффектов свечения, поэтому попробуйте разные варианты - вы даже можете смешивать и сочетать цвета, в которых один цвет смешивается с другим.
Эффект «мерцания»
Вот и все! Мы взяли те же свойство и значения text-shadow, которые были у нас раньше, обернули их в анимацию @keyframes, называемую мерцанием, и выбрали точки на временной шкале для применения теней, а также точки, которые полностью удаляют тени.
Осталось только вызвать анимацию, в которой мы хотим, чтобы свет мерцал. В данном конкретном случае давайте добавим его только к элементу <h1>. Мерцание одной части всего знака кажется немного более реалистичным, чем если бы мы применили мерцание ко всему тексту.
h1 {
animation: flicker 1.5s infinite alternate;
}
Смотрим на CodePen, что получилось:
https://codepen.io/geoffgraham/pen/ZEezaWR
Это довольно крутой эффект, который добавляет реалистичности нашему неоновому тексту! Конечно, вы можете попробовать и другие эффекты, которые также будут рассмотрены в этой статье. Например, как насчет более пульсирующей анимации или более тонкого мерцания?
Что получается опять смотрим на CodePen
Давайте изучим те и другие эффекты!
Пульсирующее свечение
Ну что, посмотрели?. Там были использованы фреймы, как и в предыдущем примере, где мы указываем размер радиуса размытия в начале и в конце анимации.
Мы хотим, чтобы размер радиуса размытия был наименьшим в конце анимации, поэтому мы просто уменьшаем значения радиуса размытия для каждого значения text-shadow во фрейме 0%. Таким образом, размер размытия постепенно уменьшается и уменьшается, создавая эффект пульсации.
Еще раз добавляем анимацию к какому-нибудь элементу. Мы снова обратимся к <h1>:
h1 { animation: pulsate 2.5s infinite alternate;
}
Легкое мерцание
Поскольку мерцание более тонкое, а уменьшение радиуса размытия не такое большое, мы должны увеличить количество раз, которое эта анимация происходит в секунду, чтобы имитировать более частое мерцание. Это можно сделать, уменьшив продолжительность анимации, скажем, до 0,11 с:
h1 { animation: pulsate 0.11s ease-in-out infinite alternate;
}
Использование фонового изображения
Было бы здорово, если бы наш знак висел на стене, а не на пустом месте. Давайте возьмем для этого фоновое изображение, может быть, какую-нибудь кирпичную текстуру из Unsplash или что-то в этом роде:
body { background-image: url(wall.jpg); }
Добавление границы
Последняя деталь, которую мы можем добавить, - это своего рода круглая или прямоугольная рамка вокруг знака. Это просто хороший способ обрамить текст и сделать его похожим на настоящий знак. Добавляя тень к границе, мы можем придать ей такой же неоновый эффект как и тексту!
Какой бы элемент ни был контейнером для текста, ему нужна граница. Допустим, мы работаем только с элементом <h1>. Вот что из этого получается. Мы вызываем свойство сокращения border, чтобы создать сплошную белую рамку вокруг заголовка, плюс небольшой отступ, чтобы дать тексту немного места для "дыхания":
Мы можем немного скруглить углы границы, чтобы детали не были такими резкими, применив радиус границы к заголовку. Вы можете использовать любое значение, которое лучше всего подходит для вас, чтобы получить желаемую округлость.
Последний штрих - свечение! Теперь text-shadow не будет работать для границы, но это нормально, потому что для этого предназначено свойство box-shadow. Синтаксис очень похож, поэтому мы даже можем использовать именно то, что у нас уже есть для text-shadow, и немного изменить значения:
Обратите внимание на ключевое слово inset? Это то, что text-shadow не может сделать, но добавление его к box-shadow границы позволяет нам получить некоторое свечение с обеих сторон границы для некоторой реалистичной глубины.
Результат наших экспериментов смотрим опять на CodePen
А как насчет доступности?
Чрезвычайно важно учитывать предпочтения пользователей, и использование этого медиа-запроса - отличный способ сделать эффект более доступным для тех, кто предпочитает ограниченную анимацию или отсутствия эффекта вообще:
@media screen and (prefers-reduced-motion) {
h1 { animation: none; } }
ЗАКЛЮЧЕНИЕ
Надеюсь, я смог показать вам, как создать крутой неоновый текст для вашего следующего проекта! Обязательно поэкспериментируйте с различными шрифтами, размерами и цветами радиуса размытия, а также не забудьте попробовать разные анимации - есть множество возможностей.
Ну и добавьте комментарий, если вы создали уникальный теневой эффект, которым хотите поделиться.
Спасибо за прочтение!