5.1 Лінійні градієнти
Градієнти - це потужний інструмент у веб-дизайні, що дозволяє створювати плавні переходи між кольорами без використання зображень. CSS надає два основних типи градієнтів: лінійні (linear-gradient) та радіальні (radial-gradient). Ці градієнти використовуються для фону елементів, створення кнопок та інших візуальних ефектів.
Лінійні градієнти (linear-gradient)
Лінійний градієнт створює плавний перехід між двома або більше кольорами вздовж певної лінії (осі). Лінія може бути горизонтальною, вертикальною або під будь-яким кутом.
Синтаксис
background: linear-gradient( direction, color-stop1, color-stop2, ...);
Значення
direction: напрям градієнта. Може бути вказаний у градусах (наприклад,90deg), за допомогою ключових слів (наприклад,to right,to bottom left)color-stop: кольорова зупинка, що визначає колір і його положення у градієнті
Приклади використання
Горизонтальний градієнт:
.linear-gradient-horizontal {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow);
}
<body>
<div class="linear-gradient-horizontal">Горизонтальний градієнт</div>
</body>
Вертикальний градієнт:
.linear-gradient-vertical {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
}
<body>
<div class="linear-gradient-vertical">Вертикальний градієнт</div>
</body>
Діагональний градієнт:
.linear-gradient-diagonal {
width: 200px;
height: 200px;
background: linear-gradient(45deg, purple, pink);
}
<body>
<div class="linear-gradient-diagonal">Діагональний градієнт</div>
</body>
Багатокольоровий градієнт:
.linear-gradient-multi {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow, green, blue);
}
<body>
<div class="linear-gradient-multi">Багатокольоровий градієнт</div>
</body>
Пояснення коду:
to right: градієнт йде зліва направоto bottom: градієнт йде зверху вниз45deg: градієнт йде під кутом 45 градусівred,yellow,green,blue: кілька кольорових зупинок для створення багатокольорового градієнта
5.2 Радіальні градієнти
radial-gradient створює плавний перехід між кольорами, що виходить з центру і поширюється до країв кола або еліпса. Радіальні градієнти можуть створювати цікаві візуальні ефекти, такі як імітація об'ємності.
Синтаксис:
background: radial-gradient( direction, color-stop1, color-stop2, ...);
Значення:
shape: форма градієнта, може бутиcircle(коло) абоellipse(еліпс) (значення за замовчуванням)size: розмір градієнта, може бутиclosest-side,closest-corner,farthest-side,farthest-cornerposition: положення центру градієнта, може бути вказане у відсотках, пікселях або за допомогою ключових слів (наприклад,center,top,left)color-stop: кольорова зупинка, що визначає колір і його положення у градієнті
Приклади використання
Круговий градієнт:
.radial-gradient-circle {
width: 200px;
height: 200px;
background: radial-gradient(circle, red, yellow);
}
<body>
<div class="radial-gradient-circle">Круговий градієнт</div>
</body>
Еліптичний градієнт:
.radial-gradient-ellipse {
width: 200px;
height: 200px;
background: radial-gradient(ellipse, blue, green);
}
<body>
<div class="radial-gradient-ellipse">Еліптичний градієнт</div>
</body>
Градієнт з центру:
.radial-gradient-at-center {
width: 200px;
height: 200px;
background: radial-gradient(circle at center, purple, pink);
}
<body>
<div class="radial-gradient-at-center">Градієнт з центру</div>
</body>
Градієнт з кута:
.radial-gradient-at-corner {
width: 200px;
height: 200px;
background: radial-gradient(circle at top left, red, blue, green);
}
<body>
<div class="radial-gradient-at-corner">Градієнт з кута</div>
</body>
Пояснення коду:
circle: створює круговий градієнтellipse: створює еліптичний градієнтat center: градієнт починається з центруat top left: градієнт починається з верхнього лівого кутаred,blue,green: кілька колірних зупинок для створення багатоколірного градієнта
5.3 Додаткові налаштування градієнтів
Повторювані градієнти
1. Лінійні повторювані градієнти (repeating-linear-gradient)
Повторювані лінійні градієнти створюють повторюваний візерунок із лінійним градієнтом.
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
2. Радіальні повторювані градієнти (repeating-radial-gradient)
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
3. Прозорі кольорові зупинки
Кольорові зупинки можуть включати прозорість для створення більш складних візуальних ефектів.
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
4. Спільне використання кількох градієнтів
Можна використовувати кілька градієнтів для створення складних фонових зображень.
background: linear-gradient(to right, red, yellow), radial-gradient(circle, blue, green);
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ