НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

CSS Підручник

CSS СТАРТ CSS Інтро CSS Синтаксис CSS Селектори CSS Як підключити CSS Коментарі CSS Кольори CSS Фони CSS Межі CSS Поля CSS Внутрішній відступ CSS Висота/Ширина CSS Блочна модель CSS Контур CSS Текст CSS Шрифти CSS Іконки CSS Посилання CSS Списки CSS Таблиці CSS Display CSS Max-Width CSS Position CSS Z-index CSS Overflow CSS Float CSS Inline-Block CSS Вирівнювання CSS Комбінатори CSS Псевдо-класи CSS Псевдо-елементи CSS Непрозорість CSS Панель навігації CSS Випадаючі списки CSS Галерея зображень CSS Спрайти зображень CSS Селектори атрибутів CSS Форми CSS Лічильники CSS Макет веб-сайту CSS Одиниці CSS Специфічності CSS !important CSS Математичні функції

CSS Розширений

CSS Закруглені кути CSS Межі зображень CSS Фони CSS Кольори CSS Кольори. Ключові слова CSS Градієнти CSS Тіні CSS Ефекти тексту CSS Веб-шрифти CSS 2D Трансформації CSS 3D Трансформації CSS Переходи CSS Анімації CSS Підказки CSS Стилі зображень CSS Image Reflection CSS Підгонка об'єкту CSS object-position CSS Masking CSS Кнопки CSS Нумерація сторінок CSS Кілька стовпців CSS Користувальницький інтерфейс CSS Змінні CSS Розміри блоків CSS Медіа-запити CSS Приклади медіа-запитів CSS Flexbox

CSS Адаптивний

RWD Інтро RWD Область перегляду RWD Вигляд сітки RWD Медіа-запити RWD Зображення RWD Відео RWD Фреймворки RWD Шаблони

CSS Grid (Сітка)

Grid Інтро Grid Контейнер Grid Елементи

CSS SASS

Підручник

CSS Приклади

CSS Шаблони CSS Приклади CSS Вікторина CSS Вправи CSS Сертифікат

CSS Довідники

CSS Довідник CSS Селектори CSS Функції CSS Довідник аудіо CSS Безпечні веб-шрифти CSS Анімація CSS Одиниці CSS PX-EM Конвертер CSS Кольори CSS Значення кольору CSS Значення за замовчуванням CSS Підтримка браузерами

CSS3. Уроки W3Schools для початківців українською мовою

En

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 еквівалентно "вгорі". Значення 90deg еквівалентно "справа". Значення 180deg еквівалентно "внизу".

Синтаксис

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

В наступному прикладі показано, як використовувати кути для лінійних градієнтів:

180deg

Приклад

#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));
}
Спробуйте самі »

Повторення лінійного градієнта

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

Приклад

Лінійний градієнт, що повторюється:

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