Создаем эффект неонового текста с CSS

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

Добавление эффекта свечения в текст

Во-первых, давайте заставим текст светиться. Это можно сделать в CSS с помощью свойства 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];*/

Добавим еще пару стилей:

h1, h2 text-align: center;
text-transform: uppercase;
font-weight: 400;
>

body background-color: #000;

И конечно, куда без html:

Welcom!

И вот что мы получим в результате:

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

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

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

Создано 27.05.2021 09:34:07

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 1 ):

ildar.khasanshin 27.05.2021 10:11:48

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Как сделать эффект свечения с помощью CSS.

Эффект свечения для элементов на веб-странице можно сделать с помощью свойства box-shadow.

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

Давайте рассмотрим несколько примеров, как это можно использовать на практике.

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

Пример 1. Свечение для элемента div.

 
Блок
 

Вот те стили, которые отвечают за создание свечения:

-moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000; box-shadow:0 0 10px #000;

Пример 2. Заставляем светиться изображение.

Пример 3. Свечение для текста.

Текст тоже можно заставить светится.

Текст

Здесь все аналогично, только используется свойство text-shadow.

Цвет свечения можно задавать любым.

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Как создать светящийся текст на CSS

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

Также с простого знака вы можете выстраивать свой стиль, который будет смотреться оригинально, и этим вы делаете свой сайт уникально.

Следуйте инструкциям и посмотрите примеры светящихся текстов.

1. Создать HTML

Создайте тег h1 с классом свечение где пишем текст.

ZorNet.Ru — сайт для вебмастера

Также можно под h2 или h3, как вам удобнее.

2. Создание CSS

Установите цвет для фона, где используем функцию линейного градиента для фона. Это создает изображение, которое состоит из постепенного перехода между двумя или более цветами вдоль прямой линии.

body <
background: linear-gradient(90deg, rgba(158, 43, 181) 0%, rgba(105, 18, 115) 35%, rgba(43, 5, 58) 100%);
>

Это стандартный фон, который выстроен на несколько оттенков цвета.

Теперь нужно создать свечение:

1. Установите размер шрифта текста, цвет и укажите, где текст должен быть расположен со свойством text-align.
2. Мы устанавливаем продолжительность анимации в 1 секунду, что означает, что анимация занимает 1 секунду, чтобы завершить один цикл.

Используйте ключевое слово ease-in-out свойства animation-timer-function, которое определяет как, будет развиваться анимация в течение каждого цикла, а не всей анимации. Установите для параметра animation-iteration-count значение бесконечное, чтобы анимация воспроизводилась без остановки.

Укажите направление анимации, установив его чередующимся, чтобы анимация воспроизводилась вперед, затем переворачивалась и повторялась. Здесь нужно задействовать префиксы -webkit- и -moz- vendor со свойством animation нужно создать.

.svetyash-chiysya <
font-size: 70px;
color: #f7f6f6;
text-align: center;
-webkit-animation: svetyash-chiysya 1s ease-in-out infinite alternate;
-moz-animation: svetyash-chiysya 1s ease-in-out infinite alternate;
animation: svetyash-chiysya 1s ease-in-out infinite alternate;
>

Ключевой кадр селектор может начинаться с процентного (%) или с помощью ключевых слов «от» ( такой же , как 0%) и «до» ( такой же , как 100%). Где 0% — это начальная точка анимации, а 100% — это конечная точка.

Определите значения свойства text-shadow, где первое значение идет под горизонтальное смещение теней. Второе значение под вертикальное смещение, но, а третий отвечает за радиус размытия, который определяет, насколько велика и насколько размыта тень.

@Keyframes правило полностью поддерживается основными браузерами.

Однако используются некоторые префиксы:

-webkit- Google Chrome 4.0
-moz- Mozilla Firefox 5.0
-webkit- Safari 4.0
-webkit- Opera 15.0
-Опера 12.0

@-webkit-keyframes svetyash-chiysya <
from <
text-shadow: 0 0 10px #f5f0f0, 0 0 20px #101010, 0 0 30px #101010, 0 0 40px #101010, 0 0 50px #9052ad, 0 0 60px #9052ad, 0 0 70px #9052ad;
>
to <
text-shadow: 0 0 20px #f5f0f0, 0 0 30px #f54da1, 0 0 40px #f54da1, 0 0 50px #f54da1, 0 0 60px #f54da1, 0 0 70px #f54da1, 0 0 80px #f54da1;
>
>

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

Вот окончательный код:

ZorNet.Ru — сайт для вебмастера

body <
background: linear-gradient(90deg, rgba(158, 43, 181) 0%, rgba(105, 18, 115) 35%, rgba(43, 5, 58) 100%);
>
.svetyash-chiysya <
font-size: 70px;
color: #f7f6f6;
text-align: center;
-webkit-animation: svetyash-chiysya 1s ease-in-out infinite alternate;
-moz-animation: svetyash-chiysya 1s ease-in-out infinite alternate;
animation: svetyash-chiysya 1s ease-in-out infinite alternate;
>
@-webkit-keyframes svetyash-chiysya <
from <
text-shadow: 0 0 10px #f5f0f0, 0 0 20px #101010, 0 0 30px #101010, 0 0 40px #101010, 0 0 50px #9052ad, 0 0 60px #9052ad, 0 0 70px #9052ad;
>
to <
text-shadow: 0 0 20px #f5f0f0, 0 0 30px #f54da1, 0 0 40px #f54da1, 0 0 50px #f54da1, 0 0 60px #f54da1, 0 0 70px #f54da1, 0 0 80px #f54da1;
>
>

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

Давайте посмотрим на другой пример:

.vmestilishche <
display: table-cell;
text-align: center;
vertical-align: middle;
>
.svetyash-chiysya <
color: #FB4264;
font-size: 32px;
line-height: 32px;
text-shadow: 0 0 3vw #F40A35;
>
.svetyash-chiysya <
animation: svetyash-chiysya 1.2s ease infinite;
-moz-animation: svetyash-chiysya 1.2s ease infinite;
-webkit-animation: svetyash-chiysya 1.2s ease infinite;
>
@keyframes svetyash-chiysya <
0%,
100% <
text-shadow: 0 0 1vw #f7130d, 0 0 3vw #f7130d, 0 0 10vw #f7130d, 0 0 10vw #f7130d, 0 0 .4vw #f7c81b, .5vw .5vw .1vw #8c7216;
color: #f7c81b;
>
50% <
text-shadow: 0 0 .5vw #821411, 0 0 1.5vw #821411, 0 0 5vw #821411, 0 0 5vw #821411, 0 0 .2vw #821411, .5vw .5vw .1vw #463809;
color: #8c7216;
>
>

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

doctor Brain

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

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

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

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

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

.neon-text

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 . Следует помнить, что мерцание части текста или отдельных символов всегда выглядит более реалистично, чем мерцание всего текста:

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

Для того, чтобы получить эффект пульсирующего света, используется тот же подход, что и для создания мерцания. Только в данном случае мы будем изменять радиус размытия, устанавливая для 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 :

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

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

@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 :

Рамка

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

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

.container

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

.container

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

.container

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

Доступность

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

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

@media screen and (prefers-reduced-motion) < h1 < animation: none; >> 

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

Новые публикации

JavaScript: сохраняем страницу в pdf

2021-07-12

HTML: Полезные примеры

2021-07-11

CSS: Ускоряем загрузку страницы

2021-07-10

JavaScript: 5 странностей

2021-07-10

JavaScript: конструктор сортировщиков

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.

© 2021 dr.Brain .
мир глазами веб-разработчика