Неоновый текст может добавить приятный футуристический штрих к любому веб-сайту. При этом магию неоновых вывесок, можно воссоздать с помощью CSS . И в сегодняшней статье, я поделюсь некоторыми советами о том, как это сделать! В данной статье рассмотрим, как добавить светящиеся эффекты в текст. Мы также рассмотрим ра...
Неоновый текст может добавить приятный футуристический штрих к любому веб-сайту. При этом магию неоновых вывесок, можно воссоздать с помощью CSS. И в сегодняшней статье, я поделюсь некоторыми советами о том, как это сделать! В данной статье рассмотрим, как добавить светящиеся эффекты в текст. Мы также рассмотрим различные способы анимации неоновых вывесок, все с использованием CSS и ключевых кадров.
Добавление эффекта свечения в текст
Во-первых, давайте заставим текст светиться. Это можно сделать в CSS с помощью свойства text-shadow. Что хорошо в текстовой тени, так это то, что мы можем применить к ней несколько теней, просто разделив их запятыми:
/* style.css */
.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];*/
Добавим еще пару стилей:
/* style.css */
h1, h2 {
text-align: center;
text-transform: uppercase;
font-weight: 400;
}
h1 {
font-size: 4.2rem;
}
h2 {
font-size: 1.8rem;
}
body {
background-color: #000;
}
И конечно, куда без html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="neonText">
Welcom!
</h1>
<h2 class="neonText">MyRusakov.ru</h2>
</div>
</body>
</html>
И вот что мы получим в результате:
Следующее, что вас может заинтересовать, - это то, что происходит со всеми этими тенями? Как я их получил и почему их так много? Во-первых, мы добавили эффекты белого свечения к внешним краям букв текста с небольшим радиусом размытия.
.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;
Продолжайте экспериментировать с различными оттенками и цветами, а также размерами радиуса размытия! Существует огромное разнообразие крутых эффектов свечения, которые вы можете создать, поэтому попробуйте различные вариации — вы даже можете смешивать и сочетать цвета, смешивая один цвет с другим.
