От автора: неоновый текст может добавить приятный футуристический штрих любому веб-сайту. Мне всегда нравилась магия неоновых надписей, и я хотел воссоздать их с помощью CSS. Я хочу поделиться советами, как это сделать! В этой статье мы рассмотрим, как добавить к тексту эффекты свечения. Мы также рассмотрим различные способы анимации неоновых надписей с использованием CSS и ключевых кадров.
Вот что мы будем делать:
Добавление эффекта свечения к тексту
Во-первых, давайте заставим текст светиться. Это можно сделать в CSS с помощью свойства text-shadow. Что полезно в text-shadow, так это то, что мы можем применить к нему несколько теней, просто разделив их запятыми:
.neonText { color: #fff; text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa;
}text-shadow требует четырех значений, первые два из которых представляют горизонтальное и вертикальное положение тени соответственно. Третье значение представляет размер радиуса размытия, а последнее значение представляет цвет тени. Чтобы увеличить размер эффекта свечения, мы бы увеличили третье значение, которое представляет радиус размытия. Или, выражаясь по-другому:
text-shadow: [x-offset] [y-offset] [blur-radius] [color];
Вот что мы получаем с помощью этого небольшого фрагмента CSS:
Следующее, что вам может быть интересно, — что случилось со всеми этими значенями? Как я их получил и почему их так много? Во-первых, мы добавили эффекты белого свечения к внешним краям букв текста с небольшим радиусом размытия.
.neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff,
}Последние пять значений — это более широкие тени текста с большим радиусом размытия, образующие зеленое свечение.
.neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, /* Green glow */ 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa;
}Было бы здорово, если бы мы могли достичь этого с менее чем пятью тенями, но нам нужны все эти тени, чтобы их можно было накладывать друг на друга, чтобы добавить больше глубины свечению. Если бы вместо этого мы использовали одиночный text-shadow, эффект не имел бы глубины, необходимой, чтобы он выглядел реалистично.
Продолжайте экспериментировать с различными оттенками и цветами, а также с размерами радиуса размытия! Вы можете создать огромное количество крутых эффектов свечения, поэтому попробуйте разные варианты — вы даже можете смешивать и сочетать цвета, в которых один цвет смешивается с другим.
Эффект «мерцания»
Одна вещь, которую вы можете заметить в неоновых надписях — это то, что некоторые из них, особенно старые, имеют тенденцию мерцать. Свет как то появляется и гаснет. Мы можем делать то же самое с анимацией CSS! Давайте сделаем анимацию @keyframes, которая включает и выключает свет быстрыми, казалось бы, случайными вспышками.
@keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa; } 20%, 24%, 55% { text-shadow: none; }
}Это действительно так! Мы взяли те же свойства text-shadow и значения, которые были у нас раньше, обернули их в анимацию @keyframes и выбрали точки на временной шкале для применения теней, а также точки, которые полностью удаляют тени.
Осталось только вызвать анимацию, в которой мы хотим, чтобы свет мерцал. В данном конкретном случае давайте только добавим ее к элементу h1. Мерцание одной части текста кажется более реалистичным, чем если бы мы применили мерцание ко всему тексту.
h1 { animation: flicker 1.5s infinite alternate; }Обратите внимание: если мы хотим, чтобы весь текст мерцал, мы могли бы удалить значения text-shadow в классе .neonText, добавить к нему анимацию и позволить @keyframes применить тени.
Это довольно крутой эффект, который добавляет реализма нашему неоновому тексту! Конечно, вы можете попробовать и другие эффекты, которые также будут рассмотрены в этой статье. Например, как насчет более пульсирующей анимации или более тонкого мерцания?
Давайте изучим те и другие эффекты!
Пульсирующее свечение
Мы только что взглянули на него. Пульсирующее свечение использует ключевые кадры, как и в предыдущем примере, где мы указываем размер радиуса размытия в начале и в конце анимации.
Мы хотим, чтобы размер радиуса размытия был наименьшим в конце анимации, поэтому мы просто уменьшаем значения радиуса размытия для каждого значения text-shadow до 0% в ключевом кадре. Таким образом, размер размытия постепенно уменьшается и уменьшается, создавая эффект пульсации.
@keyframes pulsate { 100% { /* Larger blur radius */ text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa; } 0% { /* Smaller blur radius */ text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 10px #0fa, 0 0 45px #0fa, 0 0 55px #0fa, 0 0 70px #0fa, 0 0 80px #0fa; }
}Еще раз добавляем анимацию к какому-нибудь элементу. Мы снова добавим к h1:
h1 { animation: pulsate 2.5s infinite alternate; }И все вместе:
Легкое мерцание
Мы можем немного смягчить обстановку и сделать мерцание более легким. Все, что нам нужно сделать, это немного уменьшить размер радиуса размытия 0% в ключевом кадре, но не до такой степени, как в предыдущем примере.
@keyframes pulsate { 100% { /* Larger blur radius */ text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #f09, 0 0 80px #f09, 0 0 90px #f09, 0 0 100px #f09, 0 0 150px #f09; } 0% { /* A slightly smaller blur radius */ text-shadow: 0 0 4px #fff, 0 0 10px #fff, 0 0 18px #fff, 0 0 38px #f09, 0 0 73px #f09, 0 0 80px #f09, 0 0 94px #f09, 0 0 140px #f09; }
}Поскольку мерцание более легкое, а уменьшение радиуса размытия не такое большое, мы должны увеличить количество раз, которое эта анимация происходит в секунду, чтобы имитировать более частое мерцание. Это можно сделать, уменьшив продолжительность анимации, скажем, до 0.11с:
h1 { animation: pulsate 0.11s ease-in-out infinite alternate; }Использование фонового изображения
Было бы здорово, если бы наш текст висел на стене, а не на пустом месте. Давайте возьмем для этого фоновое изображение, может быть, какую-то кирпичную текстуру из Unsplash или что-то в этом роде:
body { background-image: url(wall.jpg);
}Добавление границы
Последняя деталь, которую мы можем добавить, — это своего рода круглая или прямоугольная рамка вокруг текста. Это просто хороший способ обрамить текст и сделать его похожим на настоящую подпись. Добавляя тень к границе, мы можем придать ей такой же неоновый эффект, как и тексту!
Какой бы элемент ни был контейнером для текста, нужна граница. Допустим, мы работаем только с элементом h1. Мы вызываем свойство border, чтобы создать сплошную белую рамку вокруг заголовка, плюс небольшой отступ, чтобы дать тексту немного места:
h1 { border: 0.2rem solid #fff; padding: 0.4em;
}Мы можем немного скруглить углы границы, чтобы изображение не было таким резким, применив border-radius к заголовку. Вы можете использовать любое значение, которое лучше всего подходит для вас, чтобы получить желаемую округлость.
h1 { border: 0.2rem solid #fff; border-radius: 2rem; padding: 0.4em;
}Теперь text-shadow не сработает для границы, но это нормально, потому что для этого предназначено свойство box-shadow. Синтаксис очень похож, поэтому мы можем взять то, что у нас есть, и немного изменить значения:
h1 { border: 0.2rem solid #fff; border-radius: 2rem; padding: 0.4em; box-shadow: 0 0 .2rem #fff, 0 0 .2rem #fff, 0 0 2rem #bc13fe, 0 0 0.8rem #bc13fe, 0 0 2.8rem #bc13fe, inset 0 0 1.3rem #bc13fe;
}Обратите внимание на ключевое слово inset? Это то, что невозможно сделать с text-shadow, но добавление inset к границе box-shadow позволяет нам получить свечение по обе стороны границы для более реалистичной глубины.
А как насчет доступности?
Если пользователи предпочитают ограниченное отображение, нам нужно будет учесть это с помощью медиа-запроса prefers-reduced-motion. Это позволяет нам удалить эффекты анимации, чтобы сделать текст более доступным для тех, кто предпочитает ограниченное отображение.
Например, мы могли бы изменить мигающую анимацию, чтобы пользователи, которые включили prefers-reduced-motion, не видели анимацию. Напомним, что мы применили эффект мигания только к элементу h1, поэтому отключим анимацию для этого элемента:
@media screen and (prefers-reduced-motion) { h1 { animation: none; }
}Невероятно важно учитывать предпочтения пользователей, и использование этого медиа-запроса — отличный способ сделать эффект более доступным для тех, кто предпочитает ограниченное отображение.
Заключение
Надеюсь, я показал вам, как создать крутой неоновый текст для вашего проекта! Обязательно поэкспериментируйте с различными шрифтами, размерами радиуса размытия и цветами, а также применяйте разные анимации — есть целый мир возможностей. И добавляйте комментарии, если вы создали красивый эффект тени, которым хотите поделиться. Спасибо за чтение!
Автор: Silvia O’Dwyer
Источник: css-tricks.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен