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

Основы теней и градиентов в CSS

Прежде чем перейти к методам создания градиентных теней, важно понять основные понятия CSS, связанные с тенями и градиентами.

CSS Box Shadow

Свойство box-shadow в CSS позволяет добавлять тень к элементу. Синтаксис включает значения смещения (offset-x и offset-y), радиус размытия (blur-radius), распространение (spread-radius) и цвет.

CSS Gradient

Градиенты в CSS могут быть линейными или радиальными. Они создаются с помощью свойств linear-gradient() или radial-gradient(), где указываются начальные и конечные цвета перехода.

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

Методы создания градиентных теней

Градиентные тени можно создать различными способами, каждый из которых подходит для разных задач и эстетических целей.

1. Тень с градиентным переходом

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

.shadow-gradient {

box-shadow:

1px 1px 5px rgba(255,0,0,.9),

2px 2px 5px rgba(255,165,0,.7),

3px 3px 5px rgba(255,255,0,.5);

}

2. Псевдоэлементы с градиентом

Используя псевдоэлементы ::before или ::after, можно создать сложные градиентные эффекты, управляя градиентом и его расположением относительно основного блока.

.gradient-shadow::after {

content: "";

position: absolute;

width: 100%;

height: 100%;

top: 5px;

left: 5px;

background: linear-gradient(45deg, rgba(255,0,0,0), #000);

z-index: -1;

}

3. Фильтры и маски

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

.filtered-shadow {

filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));

background: linear-gradient(to right, red, yellow);

}

Мини-проект с примером кода

Давайте создадим пример веб-элемента с применением градиентной тени, используя CSS и HTML. Мы создадим простую кнопку с интересным градиентом, которая придаст ей более современный и привлекательный вид.

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>

<button class="gradient-shadow-button">Нажми на меня</button>

</body>

</html>

CSS (styles.css)

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background: #f5f5f5;

}

.gradient-shadow-button {

padding: 10px 20px;

font-size: 16px;

color: white;

background: #007BFF;

border: none;

border-radius: 5px;

cursor: pointer;

position: relative;

overflow: hidden;

transition: transform 0.3s ease;

}

.gradient-shadow-button::before {

content: '';

position: absolute;

width: 140%;

height: 140%;

background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(0, 123, 255, 0.8));

top: -20%;

left: -20%;

transform: rotate(45deg);

z-index: -1;

transition: opacity 0.3s ease;

}

.gradient-shadow-button:hover {

transform: translateY(-5px);

}

.gradient-shadow-button:hover::before {

opacity: 0;

}

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

Заключение

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

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