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

Основы создания неонового текста

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

Для этого нам понадобятся следующие CSS-свойства:

  • color (цвет текста)
  • text-shadow (тень)
  • animation (анимация)
ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК нейросети DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
  • Где и как применять? Потестируем модель после установки на разных задачах
  • Как дообучить модель под себя?
Участвовать бесплатно

Примеры CSS-кода для неонового текста

Начнем с создания простого свечения текста. Вот базовый пример:

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Неоновый Текст</title>

<style>

.neon-text {

color: #fff;

text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 50px #ff00ff, 0 0 60px #ff00ff;

}

</style>

</head>

<body>

<h1 class="neon-text">Эффект</h1>

</body>

</html>

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

Добавление анимации

Для добавления мерцания к неоновому тексту мы можем использовать CSS-анимацию:

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Анимация</title>

<style>

.neon-text {

color: #fff;

text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 50px #ff00ff, 0 0 60px #ff00ff;

animation: flicker 1.5s infinite alternate;

}

@keyframes flicker {

0% {

text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 50px #ff00ff, 0 0 60px #ff00ff;

}

50% {

text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 50px #ff00ff, 0 0 60px #ff00ff, 0 0 5px #ff00ff;

}

100% {

text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 50px #ff00ff, 0 0 60px #ff00ff;

}

}

</style>

</head>

<body>

<h1 class="neon-text">Неоновый Текст с Анимацией</h1>

</body>

</html>

В этом примере используется ключевое слово @keyframes для создания анимации мерцания.

Продвинутые техники

Можно добавить несколько цветов для более динамичного эффекта:

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Многоцветность</title>

<style>

.neon-text {

color: #fff;

text-shadow:

0 0 5px #fff,

0 0 10px #fff,

0 0 20px #ff00ff,

0 0 30px #ff00ff,

0 0 40px #ff00ff,

0 0 50px #ff00ff,

0 0 60px #ff00ff,

0 0 70px #00ffff,

0 0 80px #00ffff,

0 0 90px #00ffff;

animation: flicker 1.5s infinite alternate;

}

</style>

</head>

<body>

<h1 class="neon-text">Многоцветность</h1>

</body>

</html>

Интерактивность

Добавление интерактивности, например, изменение цвета при наведении курсора:

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Интерактивность</title>

<style>

.neon-text {

color: #fff;

text-shadow:

0 0 5px #fff,

0 0 10px #fff,

0 0 20px #ff00ff,

0 0 30px #ff00ff,

0 0 40px #ff00ff,

0 0 50px #ff00ff,

0 0 60px #ff00ff;

transition: color 0.3s, text-shadow 0.3s;

}

.neon-text:hover {

color: #00ffff;

text-shadow:

0 0 5px #00ffff,

0 0 10px #00ffff,

0 0 20px #00ffff,

0 0 30px #00ffff,

0 0 40px #00ffff,

0 0 50px #00ffff,

0 0 60px #00ffff;

}

</style>

</head>

<body>

<h1 class="neon-text">Интерактивность</h1>

</body>

</html>

Заключение

Создание неонового текста с помощью CSS — это способ улучшить визуальную привлекательность вашего сайта. С помощью различных свойств CSS, таких как color, text-shadow и animation, можно создать разнообразные эффекты свечения и мерцания, привлекая внимание пользователей.

Большой практикум
ЗАМЕНИ ВСЕ НЕЙРОСЕТИ НА ОДНУ — PERPLEXITY
ПОКАЖЕМ НА КОНКРЕТНЫХ КЕЙСАХ
  • Освой нейросеть Perplexity и узнай, как пользоваться функционалом остальных ИИ в одном
  • УЧАСТВОВАТЬ ЗА 0 РУБ.
  • Расскажем, как получить подписку
Участвовать бесплатно
ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК нейросети DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросеть DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
Участвовать бесплатно