👋 Эффект неонового текста на CSS
👋 Эффект неонового текста на CSS
Для получения данного эффекта мы будем использовать CSS свойство text-shadow, особенностью которого является возможность создания множественных теней, перечисленных через запятую
HTML разметка ⤵️
CSS стили ⤵️
.neon-text {
color: #fff;
text-shadow:
0 0 1px #fff,
0 0 2px #fff,
0 0 5px #fff,
0 0 11px #b60aff,
0 0 20px #b60aff,
0 0 30px #b60aff,
0 0 55px #b60aff,
0 0 80px #b60aff;
}
Данное свойство принимает 4 параметра
text-shadow: [x-offset] [y-offset] [blur-radius] [color];
🔜 x-offset - определяют горизонтальное смещение тени
🔜 y-offset - определяют вертикальное смещение тени
🔜 blur-radius - радиус размытия тени
🔜 color - устанавливает цвет тени
👍- если было полезно | ➡️ WebTaverna
Для получения данного эффекта мы будем использовать CSS свойство text-shadow, особенностью которого является возможность создания множественных теней, перечисленных через запятую
HTML разметка ⤵️
WebTaverna
CSS стили ⤵️
.neon-text {
color: #fff;
text-shadow:
0 0 1px #fff,
0 0 2px #fff,
0 0 5px #fff,
0 0 11px #b60aff,
0 0 20px #b60aff,
0 0 30px #b60aff,
0 0 55px #b60aff,
0 0 80px #b60aff;
}
Данное свойство принимает 4 параметра
text-shadow: [x-offset] [y-offset] [blur-radius] [color];
🔜 x-offset - определяют горизонтальное смещение тени
🔜 y-offset - определяют вертикальное смещение тени
🔜 blur-radius - радиус размытия тени
🔜 color - устанавливает цвет тени
👍- если было полезно | ➡️ WebTaverna
Канал источник:@WebTaverna