Эффект свечения html css

doctor Brain

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Доступность

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

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

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

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

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

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

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

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

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

Категории

О нас

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

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

Источник

Creating Glow Effects with CSS

The CSS box-shadow property is deceptively awesome. When used “traditionally”, it’s a simple way to add a shadow effect to an element. I use this for images in my blog. It’s nice. But get saucier with it and you can pull off some really interesting things. I’ve already talked about the pixel art hack. This time I’m going to share how to create colorful glow effects.

The Basics

Here’s a simple example to illustrate how box-shadow works:

div  
width: 150px; 
height: 150px; 
background-color: #fff;
 
box-shadow: 120px 80px 40px 20px #0ff; 
/* in order: x offset, y offset, blur size, spread size, color */ 
/* blur size and spread size are optional (they default to 0) */
>

And here’s a diagram of the result:

Easy enough. This is what we’ll be building upon.

Browser Support

Let’s pause for a moment to talk about browser support for box-shadow . Thankfully, it’s pretty good. IE9+ and all the other major browsers support it unprefixed. However, the blur value seems to be applied inconsistently across browsers. Chrome in particular renders it at about half the size you would expect. Not a showstopper, but something to be aware of.

Circles and Stacking

box-shadow takes the shape of the element it’s on. If we make an element round with border-radius: 50% , then box-shadow will follow suit.

We can stack multiple glow effects on an element by giving box-shadow multiple sets of values, separated by commas. The glow effects will be stacked with first on top, last on bottom.

Alright, let’s try these 2 techniques together:

div  
width: 40px; 
height: 40px; 
border-radius: 50%; 
background-color: #fff; 
box-shadow: 
0 0 60px 30px #fff, /* inner white */ 
0 0 100px 60px #f0f, /* middle magenta */ 
0 0 140px 90px #0ff; /* outer cyan */
>

Not bad! At this point you already know enough to make some impressive visuals. As an example, here’s what you can make by adding a little bit of animation to the box-shadow techniques already covered (you can click the circles, too):

Insets and Offsets

Now let’s play with inset glows. By adding inset to your box-shadow declaration, you can change it from an outer glow to an inner glow. Combine this with x/y offset values to create an effect where a color is glowing inward from one side. Applying this CSS:

div  
width: 400px; 
height: 200px; 
background-color: #fff; 
border: solid 2px #fff; 
box-shadow: 
inset 60px 0 120px #f0f, /* left magenta */ 
inset -60px 0 120px #0ff; /* right cyan */
>

Putting It All Together

Now let’s combine all these techniques to create a glowing translucent marble. Here’s the CSS:

div  
width: 300px; 
height: 300px; 
border-radius: 50%; 
box-shadow: 
inset 0 0 50px #fff, /* inner white */ 
inset 20px 0 80px #f0f, /* inner left magenta short */ 
inset -20px 0 80px #0ff, /* inner right cyan short */ 
inset 20px 0 300px #f0f, /* inner left magenta broad */ 
inset -20px 0 300px #0ff, /* inner right cyan broad */ 
0 0 50px #fff, /* outer white */ 
-10px 0 80px #f0f, /* outer left magenta */ 
10px 0 80px #0ff; /* outer right cyan */
>

And here’s the final result:

Pretty nice for just a few lines of CSS, eh? There’s more that can be done, but this is a good start. Now go forth and create shiny, glowing, colorful things!

Thanks for scrolling all the way down here! If any of my articles, demos, or open source projects have helped you, consider supporting me.

Источник

Как создать неоновый текст с помощью CSS

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

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

Во-первых, давайте заставим текст светиться. Это можно сделать в CSS с помощью свойства text-shadow. Что полезно в text-shadow, так это то, что мы можем применить к нему несколько теней, просто разделив их запятыми:

Изучите Веб-вёрстку с нуля

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

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

Вот что мы получаем с помощью этого небольшого фрагмента CSS:

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

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

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

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

Эффект «мерцания»

Одна вещь, которую вы можете заметить в неоновых надписях — это то, что некоторые из них, особенно старые, имеют тенденцию мерцать. Свет как то появляется и гаснет. Мы можем делать то же самое с анимацией CSS! Давайте сделаем анимацию @keyframes, которая включает и выключает свет быстрыми, казалось бы, случайными вспышками.

Источник