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

Основные свойства CSS для создания теней текста

text-shadow

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

.element {

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

}

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

box-shadow

Хотя box-shadow обычно используется для добавления тени к элементам блока, его можно также применять к текстовым элементам, чтобы создавать сложные и многослойные эффекты.

.element {

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

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

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

Эффекты при наведении

Основной эффект

Самый простой способ добавить эффект – использовать :hover. Это позволяет изменять свойства элемента при наведении курсора.

.element {

text-shadow: none;

transition: text-shadow 0.3s ease;

}

.element:hover {

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

}

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

Многоступенчатые тени

Это достигается добавлением нескольких значений text-shadow, разделенных запятыми.

.element:hover {

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), 4px 4px 10px rgba(0, 0, 0, 0.3);

}

Этот код добавляет сразу две шткуки при наведении, создавая глубину и объем.

Радуга

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

.element:hover {

text-shadow: 2px 2px 2px red, -2px -2px 2px orange, 2px -2px 2px yellow, -2px 2px 2px green;

}

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

Неон

Эффект неона добавляет свечение к тексту, что делает его более ярким и заметным.

.element {

text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);

transition: text-shadow 0.3s ease;

}

.element:hover {

text-shadow: 0 0 15px rgba(0, 255, 0, 1), 0 0 30px rgba(0, 255, 0, 1);

}

Этот код создает зеленое свечение вокруг текста при наведении.

Практический пример

Создадим небольшой проект, который демонстрирует использование различных эффектов тени текста при наведении. В этом проекте будет использован HTML и CSS.

HTML

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

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

<title>Тени текста при наведении</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="container">

<h1 class="shadow-basic">Основной эффект</h1>

<h1 class="shadow-multi">Многоступенчатые</h1>

<h1 class="shadow-rainbow">Радуга</h1>

<h1 class="shadow-neon">Неон</h1>

</div>

</body>

</html>

CSS

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f0f0f0;

}

.container {

text-align: center;

}

h1 {

margin: 20px 0;

transition: text-shadow 0.3s ease;

}

.shadow-basic {

text-shadow: none;

}

.shadow-basic:hover {

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

}

.shadow-multi:hover {

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), 4px 4px 10px rgba(0, 0, 0, 0.3);

}

.shadow-rainbow:hover {

text-shadow: 2px 2px 2px red, -2px -2px 2px orange, 2px -2px 2px yellow, -2px 2px 2px green;

}

.shadow-neon {

text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);

}

.shadow-neon:hover {

text-shadow: 0 0 15px rgba(0, 255, 0, 1), 0 0 30px rgba(0, 255, 0, 1);

}

Заключение

Использование CSS для тени при наведении — это простой и эффективный способ сделать ваш сайт более динамичным и привлекательным. Экспериментируйте с различными параметрами и комбинируйте эффекты, чтобы найти идеальное решение для вашего проекта.

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