ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Градиенты


Градиентный фон

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

CSS определяет два типа градиентов:

  • Линейные градиенты (идет вниз/вверх/влево/вправо/по диагонали)
  • Радиальные градиенты (определяются их центром)

CSS Линейные градиенты

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

Синтаксис

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Линейный градиент - сверху вниз (по умолчанию)

В следующем примере показан линейный градиент, который начинается сверху. Начинается красный цвет, переходя в желтый:

Пример

#grad {
  background-image: linear-gradient(red, yellow);
}
Попробуйте сами »

Линейный градиент - слева направо

В следующем примере показан линейный градиент, который начинается слева. Начинается красный цвет, переходя в желтый:

Пример

#grad {
  background-image: linear-gradient(to right, red, yellow);
}
Попробуйте сами »

Линейный градиент - по диагонали

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

В следующем примере показан линейный градиент, который начинается сверху слева (и идёт вниз вправо). Начинается красный, переходя в желтый:

Пример

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}
Попробуйте сами »

Использование углов

Если вы хотите больше контролировать направление градиента, вы можете определить угол вместо предопределенных направлений (вниз, вверх, вправо, влево, вниз вправо и т.д.).

Синтаксис

background-image: linear-gradient(angle, color-stop1, color-stop2);

Угол задается как угол между горизонтальной линией и линией градиента.

В следующем примере показано, как использовать углы на линейных градиентах:

Пример

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}
Попробуйте сами »

Использование нескольких цветовых остановок

В следующем примере показан линейный градиент (сверху вниз) с несколькими цветовыми остановками:

Пример

#grad {
  background-image: linear-gradient(red, yellow, green);
}
Попробуйте сами »

В следующем примере показано, как создать линейный градиент (слева направо) с цветом радуги и текстом:

Градиентный фон

Пример

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Попробуйте сами »

Использование прозрачности

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

Чтобы добавить прозрачность, мы используем функцию rgba() для определения цветовых остановок. Последний параметр в функции rgba() может принимать значение от 0 до 1, и оно определяет прозрачность цвета: 0 указывает на полную прозрачность, 1 указывает на полный цвет (без прозрачности).

В следующем примере показан линейный градиент, который начинается слева. Он начинается полностью прозрачным, переходя в красный цвет:

Пример

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Попробуйте сами »

Повторение линейного градиента

Функция repeating-linear-gradient() используется для повторения линейных градиентов:

Пример

Повторяющийся линейный градиент:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
Попробуйте сами »

CSS Радиальные градиенты

Радиальный градиент определяется его центром.

Чтобы создать радиальный градиент, вы также должны определить как минимум две цветовые остановки.

Синтаксис

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

По умолчанию форма имеет форму эллипса, размер - самый дальний угол, а позиция - по центру.

Радиальный градиент - это равномерное распределение цвета (по умолчанию)

В следующем примере показан радиальный градиент с равномерно расположенными цветовыми остановками:

Пример

#grad {
  background-image: radial-gradient(red, yellow, green);
}
Попробуйте сами »

Радиальный градиент - различные цветовые точки

В следующем примере показан радиальный градиент с различными интервалами цвета:

Пример

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
Попробуйте сами »

Установить форму

Параметр shape определяет форму. Может принимать значение круга или эллипса. Значением по умолчанию является эллипс.

В следующем примере показан радиальный градиент в форме круга:

Пример

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}
Попробуйте сами »

Использование ключевых слов разного размера

Параметр размера определяет размер градиента. Может принимать четыре значения:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Пример

Радиальный градиент с разными размерами ключевых слов:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
Попробуйте сами »

Повторение радиального градиента

Функция repeating-radial-gradient() используется для повторения радиальных градиентов:

Пример

Повторяющийся радиальный градиент:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
Попробуйте сами »


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

В следующей таблице перечислены CSS свойства градиента:

Свойство Описание
background-image Устанавливает одно или несколько фоновых изображений для элемента