Градієнт на базі CSS старі та нові рішення, Vaden Pro

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

Насамперед необхідно розібратися з поняттям градієнта. Що це таке?

Градієнт– особливий фон, що складається з двох і більше кольорів або відтінків, перехід яких від одного до іншого здійснюється плавно.

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

Градієнт ділиться на кілька різновидів:

Лінійний– градієнтний перехід кольорів здійснюється вздовж прямої лінії.
Круговий- колірні перетворення здійснюється по колу, від центру до далеких точок.
Кутовий– перехід здійснюється по периметру кола.
Відбитий– є комплексом лінійного градієнта та дзеркального відображення.
Алмазний- ефект свічення дорогоцінного каменю.

Нижче наведено приклади градієнтів. Номер малюнку відповідає номеру типу у списку вище.

Який вигляд має градієнт на сайті?

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

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

Цілком логічно, що застосування картинки градієнта в такому випадку є нераціональним рішенням, так як така картинка буде дуже великою і займатиме багато пам'яті. Тому завантаження сторінки буде здійснюватися із затримкою. Це нас не влаштовує.

Батьківський метод: градієнт на CSS

У ті часи, коли верстальники могли покластися тільки наCSS2, градієнт встановлювався за таким принципом

Створюється картинка шириною один піксель (або висотою – це залежить від напрямку градієнта), яка являє собою зразок необхідного градієнта.
Розмножуємо картинку необхідної осі.

Нижче показано, як це прописується у файлі CSS:

У цьому записі колір фону, записаного в background, повинен збігатися із кольором останнього пікселя картинки. Було розглянуто варіант, коли градієнт позиціонується вгорі. Тепер розглянемо, як його позиціонувати внизу:

У цьому випадку верхній піксель картинки повинен збігатися з кольором заднього фону. Результат записаного коду представлений на зображенні

Також варто відзначити, що якщо градієнт спрямований не вздовж вертикальної осі, а горизонтальної, тоrepeat-xпотрібно замінити наrepeat-y.

Крім того, хотілося б відзначити позитивні сторони цього методу:

легкість використання та мінімальний запис у коді у вигляді однієї команди;
високий показник кросбраузерності.

Не варто забувати, що не існує ідеальних рішень, кожен має свої недоліки:

фонова картинка, яка представляє додаткове навантаження на сервер, незважаючи на те, що її розмір максимально мінімізований;
на додаток до першого недоліку, до завантаження фонового зображення користувач бачитиме блок із суцільним забарвленням;
такимспособом можна реалізувати лише лінійний градієнт, для інших різновидів потрібно буде створювати великі картинки на весь фон, тому що для них не можна буде застосувати циклічність (repeat);

Насамкінець необхідно відзначити ще одну особливість методу. При зміні висоти блоку картинка не масштабуватиме, тому верх або низ блоку буде залитий суцільним кольором.

Просунутий метод: градієнт лише на CSS

З виходом нової специфікації CSS3 з'явилися нові функції, за допомогою яких можна встановлювати градієнтний фон блоку. Перша функція -linear-gradient();, яка формує лінійний градієнт, і друга -radial-gradient();, яка відповідає за радіальний градієнт. Цей тандем дозволить створювати будь-який вид градієнта. Також варто відзначити широкий спектр можливостей функцій, до якого входить можливість встановлення багатобарвного градієнта, а також встановлювати своє розташування через background-position. Нижче в таблицях представлений повний потенціал можливостей цих функцій