Как сделать неоновую кнопку css
Обновлено: 05.07.2024
При правильном использовании неоновое свечение добавляет приятные футуристические нотки дизайну сайта. Мне всегда нравилась магия неоновых витрин и я не терял надежды воссоздать этот, поистине, бесподобный эффект с помощью CSS.
В этой статье мы разберем процесс создания светящихся букв и рассмотрим различные анимационные эффекты. Все, что потребуется: CSS и keyframes.
Содержание
Светящиеся буквы
HTML-разметка для нашего маленького проекта предельно проста:
У нас есть текст h1 и h2 , заключенный в родительский блок container . Эффект свечения будет создаваться для класса neon-text с помощью свойства text-shadow , примечательной особенностью которого является возможность создания множественных теней, перечисленных через запятую:
CSS-свойство text-shadow добавляет к тексту тень и принимает 4 параметра.
Первые два параметра определяют, соответственно, горизонтальное и вертикальное смещение тени. Третий параметр указывает на радиус размытия тени. Последний параметр устанавливает цвет тени.
Так, чтобы усилить свечение текста, нужно увеличить радиус размытия: третий параметр CSS-свойства text-shadow .
Итак, с помощью одного CSS-свойства и нескольких теней в браузере мы получим приблизительно такую картинку:
Возможно, для некоторых начинающих разработчиков, будет непонятно - зачем для одного элемента применяется такое большое количество теней?
Сначала, мы создаем эффект белого свечения внешних краев букв с небольшим радиусом размытия:
Затем, мы добавляем пять теней, создающих более размытое (то есть охватывающее больший радиус) зеленое свечение:
Конечно, было бы хорошо, если бы можно было применять меньшее количество теней. Но, нам требуются все указанные элементы CSS-свойства text-shadow , так как тени накладываются друг на друга, создавая иллюзию глубины света. Если бы мы использовали для текста одну или две тени, мы бы не смогли получить глубину света, а значит и картинка оставалась бы плоской и не создавала бы нужную нам иллюзию.
Каждый раз, работая над свечением текста с помощью CSS, нужно экспериментировать, тестировать различные цвета и их оттенки, различные варианты наложения теней и различные значения радиусов размытия для каждой тени. Только так можно добиться максимально правдоподобного результата.
Мерцание
Для всех неоновых вывесок, особенно для старых, характерно одно общее свойство - они мерцают. Свет вывесок затухает, а затем снова становится ярким. Примечательно, что подобного эффекта можно добиться с помощью CSS-анимации. Для этого мы обратимся к keyframes:
Такой подход действительно работает: достаточно взять свойство text-shadow с уже существующими параметрами и поместить его в анимацию @keyframes с названием flicker , после чего остается только установить на временной шкале псевдослучайные точки появления и полного исчезновения тени.
Остается только применить анимацию к нужному HTML-элементу. Например: к элементу h1 . Следует помнить, что мерцание части текста или отдельных символов всегда выглядит более реалистично, чем мерцание всего текста:
Пульсирующий свет
Для того, чтобы получить эффект пульсирующего света, используется тот же подход, что и для создания мерцания. Только в данном случае мы будем изменять радиус размытия, устанавливая для 100% ключевого кадра максимальное значение радиуса размытия, а для 0% - минимальное:
Созданную анимацию для эффекта пульсирующего света мы снова применим к элементу h1 :
Невыраженное мерцание
Мы можем создать более реалистичный эффект частичного мерцания, для этого так же, как и в случае с эффектом пульсирующего света, достаточно уменьшить радиус размытия тени, не убираяя ее совсем:
Полученный эффект, уже по традиции, применим к элементу h1 :
Рамка
Прямоугольная или закругленная рамка - важный элемент светящейся неоновой вывески. Мы можем без особого труда создать ее с помощью CSS, придав ей такие же светящиеся свойства, как и тексту.
С помощью CSS-свойства border создадим рамку вокруг текста:
Установив нужное нам значение border-radius , сделаем закругленные углы:
Наконец, создадим эффект неонового свечения. Для блочного элемента container CSS-свойство text-shadow неприменимо, вместо него нужно использовать box-shadow . Значения тени, устанавливаемые для рамки очень похожи на значения, созданные ранее для текста. Следует обратить внимание на ключевое слово inset . С его помощью мы создаем эффект свечения внутри рамки, добавляя ей реалистичности:
Полученный результат можно посмотреть на CodePen.
Доступность
Создавая эффект мерцающей или пульсирующей неоновой вывески следует учитывать потребности людей с ограниченными возможностями. Очень важно понимать, что для некоторых пользователей использование таких эффектов является нежелательным.
В таком случае необходимо воспользоваться медиа запросом prefers-reduced-motion , чтобы удалить анимацию и сделать текст более доступным для чтения.
Спасибо за внимание.
Простой пример очередной анимированной кнопки с эффектом свечения при наведении. Можно сделать свечение кнопки и без наведения, это уже дело вкуса и дизайна.
HTML для кнопки
CSS код для анимированной кнопки
Пример того, как будет выглядеть анимированная кнопка
Видео урока, как написать код для данной светящейся кнопки. Я бы пекомендовал, не копирвоать код, а написать его по этому видео. Это зайет на 2 минуты больше времени, но будет понятна логика, как работает анимация “свечения”.
Рекомендую к прочтению:
Комментарии (2) к “Анимированная светящаяся при наведении кнопка с помощью CSS”
Богдан
Кстати Сафари схож с браузером Мозила
Denis Creative
Проблему видел, как вылечить на 100% не знаю, но на вскидку пару вариантов попробовал, если уменьшить blur и увеличить размер псевдо-элемента, то рамка пропадает, но и фон выглядит меньше, не таким светящимся. А иначе в Сафари выглядит как-будто фон ограничивается и обрезается.
Всем привет. О CSS3 можно говорить много и предела возможностей пока не видно (конечно же они есть, но мы пока еще не все освоили и не все придумали). Тени, уголки, градиенты, изменение цвета изображений — и это только поверхностный уровень возможностей CSS3. Его нужно изучать. Ну а пока я выкладываю очередную сборку CSS3 эффектов с текстом при наведении (конечно можно сделать и не при наведении).
6 CSS3 эффекта неонового свечения: красный, голубой, желтый, зеленый, оранжевый и фиолетовый. Эффект применяется к тексту и свечение происходит при наведении. Свечение анимированное, создает эффект затухания и вспыхивания.
Долой слова, вот скрин того, что вы можете увидеть в демо и скачать себе на компьютер, поставив затем один из эффектов себе на сайт
В основе эффекта лежат атрибуты:
К каждому примеры применен определенный шрифт (Monoton, Iceland, Pacifico, PressStart, Audiowide и Vampiro One в той последовательности как они показаны на скрине). Скорее всего эти шрифты не поддерживают кириллицу, поэтому советую сразу подумать о своем шрифте.
Чтобы подключить эффекты, нужно
2. Разархивировать его
3. Закачать на сервер файл neon.css
4. Придумать свои стили
И вместо нумерации псевдоклассом nth-child ( nth-child1, nth-child2 и т.д. ) можно поставить class red, blue и так далее
5. Присвоить class стилизуемому элементу
где атрибут text-effect имеет css:
Это пример самого первого эффекта (RED)
Вам нужно просто повнимательнее изучить css файл и все станет понятно. Спасибо за внимания, надеюсь помог. Пока
Здесь приводится простой способ добавления эффекта свечения на контент с помощью такого свойства CCS3, как box-shadow .
Свечение для div-элементов
Исходный код этого примера:
Свечение для изображений
Исходный код этого примера:
Свечение непрямоугольной картинки
Если такое же свойство box-shadow применить к непрямоугольной картинке, то эффект будет совсем не тот, какой хотелось бы:
Для создания эффекта свечения или тени для подобных картинок надо использовать специальный фильтр drop-shadow :
Исходный код этого примера:
Поддержка CSS Filter drop-shadow современными браузерами достаточно хорошая.
Свечение для текста
Создание эффекта неонового свечения для текста с использованием свойства text-shadow :
Читайте также: