CSS: неоновый текст

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

2021-06-04 dr.Brain

время чтения 6 мин.

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

В этой статье мы разберем процесс создания светящихся букв и рассмотрим различные анимационные эффекты. Все, что потребуется: CSS и keyframes.

Содержание

Светящиеся буквы

HTML-разметка для нашего маленького проекта предельно проста:

<div class="container">
    <h1 class="neon-text">Добро пожаловать</h1>
    <h2 class="neon-text">открыто круглосуточно</h2> 
 </div>

У нас есть текст h1 и h2, заключенный в родительский блок container. Эффект свечения будет создаваться для класса neon-text с помощью свойства text-shadow, примечательной особенностью которого является возможность создания множественных теней, перечисленных через запятую:

.neon-text {
  color: #fff;
  text-shadow:
    0 0 1px #fff,
    0 0 2px #fff,
    0 0 5px #fff,
    0 0 11px #0fa,
    0 0 20px #0fa,
    0 0 30px #0fa,
    0 0 55px #0fa,
    0 0 80px #0fa;
}

CSS-свойство text-shadow добавляет к тексту тень и принимает 4 параметра.

text-shadow: [x-offset] [y-offset] [blur-radius] [color];

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

Так, чтобы усилить свечение текста, нужно увеличить радиус размытия: третий параметр CSS-свойства text-shadow.

Итак, с помощью одного CSS-свойства и нескольких теней в браузере мы получим приблизительно такую картинку:

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

Попробуем разобраться.

Сначала, мы создаем эффект белого свечения внешних краев букв с небольшим радиусом размытия:

.neon-text {
  color: #fff;
  text-shadow:
    /* белый свет */
    0 0 1px #fff,
    0 0 2px #fff,
    0 0 5px #fff;
}

Затем, мы добавляем пять теней, создающих более размытое (то есть охватывающее больший радиус) зеленое свечение:

.neon-text {
  color: #fff;
  text-shadow:
    /* белый свет */
    0 0 1px #fff,
    0 0 2px #fff,
    0 0 5px #fff,
    /* зеленый свет */
    0 0 11px #0fa,
    0 0 20px #0fa,
    0 0 30px #0fa,
    0 0 55px #0fa,
    0 0 80px #0fa;
}

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

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

Мерцание

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

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 1px #fff,
      0 0 2px #fff,
      0 0 5px #fff,
      0 0 11px #0fa,
      0 0 20px #0fa,
      0 0 30px #0fa,
      0 0 55px #0fa,
      0 0 80px #0fa;
  }
  20%, 24%, 55% {       
    text-shadow: none;
  }
}

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

Остается только применить анимацию к нужному HTML-элементу. Например: к элементу h1. Следует помнить, что мерцание части текста или отдельных символов всегда выглядит более реалистично, чем мерцание всего текста:

h1 {
  animation: flicker 1.5s infinite alternate;     
}

Пульсирующий свет

Для того, чтобы получить эффект пульсирующего света, используется тот же подход, что и для создания мерцания. Только в данном случае мы будем изменять радиус размытия, устанавливая для 100% ключевого кадра максимальное значение радиуса размытия, а для 0% - минимальное:

@keyframes flicker {
  /* максимальное свечение */
  100% {
    text-shadow:
      0 0 2px #fff,
      0 0 4px #fff,
      0 0 8px #fff,
      0 0 15px #0fa,
      0 0 30px #0fa,
      0 0 40px #0fa,
      0 0 70px #0fa,
      0 0 100px #0fa;
  }
  /* минимальное свечение */  
  0% {
    text-shadow:
      0 0 1px #fff,
      0 0 2px #fff,
      0 0 5px #fff,
      0 0 11px #0fa,
      0 0 20px #0fa,
      0 0 30px #0fa,
      0 0 55px #0fa,
      0 0 80px #0fa;
  }
}

Созданную анимацию для эффекта пульсирующего света мы снова применим к элементу h1:

h1 {
  animation: pulsate 2.5s infinite alternate;     
}

Невыраженное мерцание

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

@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 2px #fff,
      0 0 4px #fff,
      0 0 8px #fff,
      0 0 15px #0fa,
      0 0 30px #0fa,
      0 0 40px #0fa,
      0 0 70px #0fa,
      0 0 100px #0fa;
    }
    20%, 24%, 55% {
    text-shadow:
      0 0 1px #fff,
      0 0 2px #fff,
      0 0 5px #fff,
      0 0 11px #0fa,
      0 0 20px #0fa,
      0 0 30px #0fa,
      0 0 55px #0fa,
      0 0 80px #0fa;
  }
}

Полученный эффект, уже по традиции, применим к элементу h1:

h1 {
  animation: flicker .5s infinite alternate;     
}

Рамка

Прямоугольная или закругленная рамка - важный элемент светящейся неоновой вывески. Мы можем без особого труда создать ее с помощью CSS, придав ей такие же светящиеся свойства, как и тексту.

С помощью CSS-свойства border создадим рамку вокруг текста:

.container {
  padding: 2.5rem;
  border: solid 2px #fff;
}

Установив нужное нам значение border-radius, сделаем закругленные углы:

.container {
  padding: 2.5rem;
  border: solid 2px #fff;
  border-radius: 0.8rem;  
}

Наконец, создадим эффект неонового свечения. Для блочного элемента container CSS-свойство text-shadow неприменимо, вместо него нужно использовать box-shadow. Значения тени, устанавливаемые для рамки очень похожи на значения, созданные ранее для текста. Следует обратить внимание на ключевое слово inset. С его помощью мы создаем эффект свечения внутри рамки, добавляя ей реалистичности:

.container {
  padding: 2.5rem;
  border: solid 2px #fff;
  border-radius: 0.8rem;
  box-shadow: 
    0 0 .1rem #fff,
    0 0 .2rem #fff,
    0 0 .3rem #0fa,
    0 0 .8rem #0fa,
    0 0 1rem #0fa,
    inset 0 0 1.3rem #0fa;    
}

Полученный результат можно посмотреть на CodePen.

Доступность

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

В таком случае необходимо воспользоваться медиа запросом prefers-reduced-motion, чтобы удалить анимацию и сделать текст более доступным для чтения.

@media screen and (prefers-reduced-motion) { 
  h1 {
    animation: none;
  }
}

Спасибо за внимание.

Перевод статьи Silvia O’Dwyer “How to Create Neon Text With CSS”.

doctor Brain