Використання Кольорів Фону
Свайпніть щоб показати меню
Колір фону вебсайту відіграє важливу роль у формуванні настрою та атмосфери ресурсу. Це один із основних візуальних елементів, який бачать користувачі при відвідуванні сайту, і він може суттєво впливати на загальний вигляд і сприйняття вебсторінки.
background-color
Ця властивість дозволяє встановити колір фону для елемента. Значення може бути у будь-якому форматі: hex, rgb, rgba або зарезервоване слово.
background-color: value;
index.html
index.css
Статичний колір vs Градієнтний колір
Статичний колір — це окреме значення кольору, яке рівномірно застосовується до елемента, наприклад, red або #0000FF. Натомість, градієнтний колір передбачає змішування двох або більше кольорів для створення плавного переходу між ними.
index.html
index.css
За допомогою градієнтного кольору можна створювати більш привабливі та динамічні дизайни, ніж зі статичним кольором. Розглянемо різні способи оголошення градієнтів.
Плавний linear-gradient
Щоб задати фоновий колір із лінійним градієнтом, використовується:
background-image: linear-gradient("direction", "color1", "color2", ...);
index.html
index.css
Також можна вказати відсоток кольору у градієнті.
index.html
index.css
Суцільний linear-gradient
Смугастий фон можна отримати, якщо вказати однаковий відсоток для сусідніх кольорів. Запустіть приклад, щоб побачити різницю.
index.html
index.css
radial-gradient
Радіальний градієнт працює так само, як і лінійний. Єдина відмінність полягає в тому, що колір починається з центру і розповсюджується назовні.
index.html
index.css
1. Яка основна відмінність між статичним кольором і градієнтним кольором у CSS?
2. У чому різниця між лінійним та радіальним градієнтом у CSS?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат