CSS Градієнти
Градієнти CSS дозволяють відображати плавні переходи між двома або більше вказаними кольорами.
CSS визначає два типи градієнтів:
- Лінійні градієнти (йде вниз/вгору/вліво/вправо/по діагоналі)
- Радіальні градієнти (визначаються їх центром)
CSS Лінійні градієнти
Щоб створити лінійний градієнт, ви маєте визначити як мінімум дві точки кольору. Кольорові точки - це кольори, між якими ви хочете зробити плавні переходи. Ви також можете встановити початкову точку і напрямок (або кут) разом з ефектом градієнта.
Синтаксис
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Напрямок - зверху вниз (за замовчуванням)
В наступному прикладі показано лінійний градієнт, який починається зверху. Він починається з червоного кольору, переходячи в жовтий колір:
Напрямок - зліва направо
В наступному прикладі показано лінійний градієнт, що починається зліва. Він починається з червоного кольору, переходячи в жовтий колір:
Напрямок - діагональ
Ви можете створити градієнт по діагоналі, вказавши як горизонтальне, так і вертикальне початкове положення.
В наступному прикладі показано лінійний градієнт, який починається зліва вгорі (та йде вниз вправо). Він починається з червоного кольору, переходячи в жовтий колір:
Використання кутів
Якщо вам потрібен більший контроль над напрямком градієнта, ви можете визначити кут замість передвизначених напрямків (вниз, вгору, вправо, вліво, вправо вниз і т.д.). Значення 0deg еквівалентно "вгорі". Значення 90deg еквівалентно "справа". Значення 180deg еквівалентно "внизу".
Синтаксис
background-image: linear-gradient(angle, color-stop1, color-stop2);
В наступному прикладі показано, як використовувати кути для лінійних градієнтів:
Використання кількох кольорових точок
В наступному прикладі показано лінійний градієнт (зверху вниз) з кількома кольоровими точками:
В наступному прикладі показано, як створити лінійний градієнт (зліва направо) з кольорами веселки та деяким текстом:
Приклад
#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%);
}
Спробуйте самі »
