Вивчайте Використання Кольорів Фону | Декоративні та сучасні ефекти

Свайпніть щоб показати меню

Колір фону вебсайту відіграє важливу роль у формуванні настрою та атмосфери ресурсу. Це один із основних візуальних елементів, який бачать користувачі при відвідуванні сайту, і він може суттєво впливати на загальний вигляд і сприйняття вебсторінки.

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?

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 5. Розділ 1

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Секція 5. Розділ 1