Создание неонового свечения с помощью CSS

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

Содержание

Содержание
Светящиеся буквы
Мерцание
Пульсирующий свет
Частичное мерцание
Неоновая рамка
Доступность

Содержание

Светящиеся буквы
Мерцание
Пульсирующий свет
Частичное мерцание
Неоновая рамка
Доступность

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

Для создания эффекта неонового свечения нам потребуется простая HTML-разметка:

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

CSS-код для создания свечения:

.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;
}

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

Мерцание

Для создания эффекта мерцания неонового света можно использовать анимацию с ключевыми кадрами:

@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;
}
}

h1 {
animation: flicker 1.5s infinite alternate;
}

Анимация создается с помощью @keyframes, где указываются моменты, когда свет полностью выключается или затухает.

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

Эффект пульсирующего света можно создать, изменяя радиус размытия теней:

@keyframes pulsate {
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;
}
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;
}
}

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 {
animation: flicker 0.5s infinite alternate;
}

Неоновая рамка

Для создания светящейся рамки вокруг текста используйте box-shadow:

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

Этот эффект придаёт дополнительную реалистичность, особенно при использовании inset для внутреннего свечения.

Доступность

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

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

Эти методы помогут вам создать потрясающий неоновый эффект на вашем сайте, делая его визуально привлекательным и доступным для всех пользователей.