САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

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 Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

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

CSS3 Адаптивный дизайн

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

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

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

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

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS3 Градиент



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

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

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

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

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

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

Синтаксис

Фон: линейный градиент(направление, цвет-стоп1, цвет-стоп2, ...);

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

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

Пример

#grad {
    background: linear-gradient(red, yellow);
}
Редактор кода »

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

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

Пример

#grad {
  background: linear-gradient(to right, red , yellow);
}
Редактор кода »

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

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

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

Пример

#grad {
  background: linear-gradient(to bottom right, red, yellow);
}
Редактор кода »

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

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

Синтаксис

Фон: линейный градиент(угол, цвет-стоп1, цвет-стоп2);

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

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

Пример

#grad {
  background: linear-gradient(-90deg, red, yellow);
}
Редактор кода »

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

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

Пример

#grad {
  background: linear-gradient(red, yellow, green);
}
Редактор кода »

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

Разночветный фон

Пример

#grad {
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Редактор кода »

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

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

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

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

Пример

#grad {
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Редактор кода »

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

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

Пример

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

#grad {
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
Редактор кода »

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

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

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

Синтаксис

фон: радиальный градиент(формировать размер at положение, начало-цвет, ..., последний-цвет);

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

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

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

Пример

#grad {
  background: radial-gradient(red, yellow, green);
}
Редактор кода »

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

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

Пример

#grad {
  background: radial-gradient(red 5%, yellow 15%, green 60%);
}
Редактор кода »

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

Параметр shape определяет фигуру. Может принимать значение circle или ellipse. Значение по умолчанию - ellipse.

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

Пример

#grad {
  background: radial-gradient(circle, red, yellow, green);
}
Редактор кода »

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

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

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

Пример

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

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

#grad2 {
  background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
Редактор кода »

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

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

Пример

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

#grad {
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
Редактор кода »