Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS CSS-фоны CSS границы CSS поля CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS CSS-текст CSS-шрифты CSS-иконки CSS-ссылки CSS-списки CSS-таблицы Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты CSS-тени Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

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

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

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

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);
}


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

Если вы хотите больше контролировать направление градиента, вы можете определить угол вместо предопределенных направлений (вниз, вверх, вправо, влево, вправо вниз и т. д.). Значение 0deg эквивалентно «наверх». Значение 90 градусов эквивалентно «вправо». Значение 180 градусов эквивалентно «вниз».

Синтаксис

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

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

180 градусов

Пример

#grad {
  background-image: linear-gradient(180deg, 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%);
}