Градієнти CSS

19

Від автора: В точності так, як ви можете оголосити фон елемента в CSS суцільним кольором, точно так само можна оголосити його градієнтом. Для управління і продуктивності краще підходить застосування заявлених в CSS градієнтів замість використання файлу зображення.

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

Градієнти – це фонове зображення

Тоді як оголошення суцільного кольору використовує властивість background-color в CSS, градієнти застосовують background-image. Воно дуже зручно з кількох причин, на які ми пояснимо пізніше. Умовно позначається властивість background зрозуміє, що ви маєте на увазі, якщо заявити з них що-то одне.

.gradient {
/* можна використовувати як альтернативний варіант */
background-color: red;
/* буде «поверх», якщо його підтримує браузер */
background-image: linear-gradient(red, orange);
/* зробить скидання інших властивостей, як background-position, але розуміє, що ви маєте на увазі */
background: red;
background: linear-gradient(red, orange);
}

Лінійний градієнт

Можливо, самий звичний і потрібний варіант — linear-gradient(). Вісь координат може йти зліва направо, зверху вниз або під будь-яким обраним вами кутом. Якщо не заявляти кут, то буде матися на увазі зверху вниз:

.gradient {
background-image:
linear-gradient(
red, #f06d06
);
}

Розділені комами кольору відображають зазвичай застосовуваний вами колір: Hex, іменовані кольору, rgba, # hsla-color hsla і т. д. Щоб зробити градієнт зліва направо, передайте додатковий параметр на початку функції linear-gradient(), що починається зі слова to, що означає напрямок, наприклад to right:

.gradient {
background-image:
linear-gradient(
to right,
red, #f06d06
);
}

Синтаксис to також працює для кутів. Наприклад, якщо вам потрібна вісь градієнта, що починається з нижнього лівого кута і йде в правий верхній кут, можна сказати to top right:

.gradient {
background-image:
linear-gradient(
to top right,
red, #f06d06
);
}

Якщо блок був квадратним, то кут такого градієнта став би 45°, але це не так. Якщо потрібно гарантувати 45°, можна це заявити:

.gradient {
background-image:
linear-gradient(
45deg,
red, #f06d06
);
}

Також ви не обмежені лише двома кольорами. Фактично, можна отримати стільки розділених комами квітів, скільки потрібно. Ось чотири:

.gradient {
background-image:
linear-gradient(
to right,
red,
#f06d06,
rgb(255, 255, 0),
green
);
}

Також можна заявити, де має починатися будь-який з окремих кольорів. Це називається «колірними зупинили». Скажімо, якщо вам потрібно, щоб жовтий займав більше всього місця, а червоний – зовсім небагато в самому початку, можна зробити color-stop жовтого кольору досить рано:

.gradient {
height: 100px;
background-color: red;
background-image:
linear-gradient(
to right,
red,
yellow 10%
);
}

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

.columns-bg {
background-image:
linear-gradient(
to right,
#fffdc2,
#fffdc2 15%,
#d7f0a2 15%,
#d7f0a2 85%,
#fffdc2 85%
);
}

Браузерна підтримка/Префікси

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

Старий: вихідний спосіб, що застосовується виключно до WebKit, з такими штуками, як from() і color-stop()

Підлітковий: стара система кутів, наприклад, left

Молодий: новостворена система кутів, наприклад, to right

А також префікси. Давайте складемо список:

Chrome

1-9: Старий, з префіксом

10-25: Підлітковий, з префіксом

26: Молодий, без префіксу

Safari

3-: Підтримка відсутня

4-5.0: Старий, з префіксом

6.1: Молодий, без префіксу

Firefox

3.5-: Підтримка відсутня

3.6-15: Підлітковий, з префіксом

16: Молодий, без префіксу

Opera

11.0-: Підтримка відсутня

11.1-11.5: Підлітковий, із префіксом, тільки лінійний

11.6-12: Підлітковий, із префіксом, доданий радіальний

12.1: Підлітковий, без префіксу

15: Молодий, без префіксу

IE

8-: Підтримка відсутня

9: Тільки фільтри

10+: Молодий, без префікса (також підтримується Підлітковий з префіксом)

Android

2.0-Підтримка відсутній

2.1-3.0: Підлітковий, з префіксом

4.0-4.3: Молодий, з префіксом

4.4+: Молодий, без префіксу

iOS

3-: Підтримка відсутня

3.2-4.3: Підлітковий, з префіксом

5.0-6.1: Молодий, з префіксом

7.0: Молодий, без префіксу

Тут є невелике накладення. Наприклад, коли браузер підтримує «молодий» синтаксис, він, можливо, також підтримує більш старі синтаксисы, що включають префікс. Найкраще робити так: якщо підтримується «молодий», то його і застосовуйте. Так що, якщо вам потрібна абсолютна найглибша браузерна підтримка, лінійний градієнт буде виглядати приблизно так:

.gradient {
/* альтернатива (також альтернативно можна застосувати .jpg/.png) */
background-color: red;
/* альтернативний варіант SVG для IE 9 (можна застосувати URI даних або використовувати фільтр) */
background-image: url(fallback-gradient.svg);
/* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
background-image:
-webkit-gradient(linear, left, top, right, top from(red), to(#f06d06));
/* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
background-image:
-webkit-linear-gradient(left, red, #f06d06);
/* Firefox 3.6 — 15 */
background-image:
-moz-linear-gradient(left, red, #f06d06);
/* Opera 11.1 — 12 */
background-image:
-o-linear-gradient(left, red, #f06d06);
/* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
background-image:
linear-gradient(to right, red, #f06d06);
}

Тут жахливо багато коду. Писати його вручну – це можливі помилки і велика кількість праці. Впоратися з ним допомагає Autoprefixer, що дозволяє відрізати фрагменти коду, коли ви вирішите, які браузери будете підтримувати. Домішка-міксин Compass вміє робити URI даних SVG для IE 9, якщо вам це важливо.

Фільтри IE

Internet Explorer (IE) 6-9, хоча і не підтримує синтаксис градієнтів CSS, пропонує програмний метод створення фонових градієнтів

/* «Недійсний», але працює в 6-8 */
filter: програми:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);
/* Дійсний, працює в 8-9 */
-ms-filter: «програми:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)»;

Ось деякі міркування на тему, застосовувати їх або ні:

filter зазвичай вважається поганим для продуктивності,

background-image скасовує фільтр, тому якщо вам потрібно застосувати його для альтернативного варіанту, фільтри залишаться за бортом. Якщо в якості альтернативи підходить щільний колір (background-color), можна застосувати фільтр

Навіть хоча фільтри працюють тільки зі значеннями hex, все одно можна отримати alpha-прозорість, поставивши префікс до значення hex з кількістю прозорості від 00 (0%) до FF (100%). Приклад:

rgba(92,47,90,1) == #FF5C2F5A
rgba(92,47,90,0) == #005C2F5A

Радіальні градієнти

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

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

.gradient {
background-image:
radial-gradient(
yellow,
#f06d06
);
}

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

.gradient {
background-image:
radial-gradient(
circle,
yellow,
#f06d06
);
}

Зверніть увагу, що градієнт округлий, але затухає на всій протяжності до кінця кольору до дальнього краю. Якщо потрібно, щоб ця окружність перебувала повністю всередині елемента, можна було б забезпечити це, визначивши, що нам потрібно загасання, закінчувався до найближчої стороні closest-side, як відокремлений комами значення постаті, на зразок цього:

.gradient {
background-image:
radial-gradient(
circle closest-side,
yellow,
#f06d06
);
}

Тут можливі значення: closest-corner, closest-side, farthest-corner, farthest-side. Про них можна думати так: «Мені потрібно, щоб цей радіальний градієнт згасав від центральної точки до __________, пристосовувався і заповнював все навколо».

Радіального градієнту також не потрібно за замовчуванням починатися в центрі, ви можете призначити певну точку, використавши at ______ в якості першого параметра, як тут:

.gradient {
background-image:
radial-gradient(
circle at top right,
yellow,
#f06d06
);
}

Я проясню тут все, навівши приклад квадрата і регулювання колірного зупинки:

Браузерна підтримка

В основному така ж, як у linear-gradient(), за винятком того, що, коли починалася підтримка градієнтів, в дуже старої версії Opera були тільки лінійні, а не радіальні. Як і лінійний, radial-gradient() зазнав деякі зміни синтаксису. І знову тут: «Старий», «Підлітковий» і «Молодий».

/* Приклад Старого синтаксису */
background-image:
-webkit-gradient(radial, center center, 0, center center, 141, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple));
/* Приклад Підліткового */
background-image:
-webkit-radial-gradient(45px 45px, farthest-corner, #F00 0%, #00F 100%) repeat scroll 0% 0% rgba(0, 0, 0, 0);
/* Приклад Молодого */
background-image:
radial-gradient(circle farthest-side at right, #00F #FFF);

Критерії наступні:

Старий: з префіксом -webkit-, штуки на зразок from() і color-stop()

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

Молодий: багатослівний перший параметр, типу circle closest-corner at top right

І знову я дозволив би справлятися з цим Autoprefixer. Ви пишете в новітньому синтаксис, він робить альтернативні варіанти. Радіальні градієнти більш розумні, ніж лінійні, тому я раджу задовольнитися новітнім синтаксисом і продовжити роботу з ним (та, якщо потрібно, забудьте все, що знаєте про старих синтаксисах).

Повторні градієнти

У повторних градієнтів ненабагато менша браузерна підтримка. У них є як лінійні, так і радіальні різновиди.

Стосовно до неповторним градієнтам існує спосіб їх створення так, щоб той був крихітним прямокутником, і при вирівнюванні з іншими крихітними прямокутними версіями самого себе створював повторюваний візерунок. Тому спочатку зробіть такий градієнт і встановіть background-size, щоб вийшов такий маленький прямокутник. Тепер легко створюються смужки, які потім можна обертати і робити все, що завгодно.

Користуючись repeating-linear-gradient(), не доводиться вдаватися до подібних хитрощів. Розмір градієнта визначається останнім колірним стопом. Якщо він відбувається на 20px, то розмір градієнта (який потім повторюється) – це квадрат 20px на 20px.

.repeat {
background-image:
repeating-linear-gradient(
45deg,
yellow,
yellow 10px,
red 10px,
red 20px /* визначає розмір */
);
}

Те ж саме з радіальним:

.repeat {
background:
repeating-radial-gradient(
circle at 0 0,
#eee,
#ccc 50px
);
}

Недоречна завантаження альтернативи

Як ми вже говорили, деякі дійсно старі браузери взагалі не підтримують синтаксису градієнтів CSS. Якщо вам потрібна альтернатива, яка є градієнтом, то створити таке диво (.jpg / .png) може зображення. Найжахливіше те, що в деяких злегка менш старих браузерах, які вже почали підтримувати градієнти CSS, завантажиться альтернативне зображення. Якщо так, то зробіть запит HTTP зображення, навіть якщо він відобразить градієнт CSS. Ось що зробив Firefox 3.5.8 (дивіться скріншот), а також Chrome 5 — і Safari 5.0.1. Дивіться:

Градієнти CSS

Safari 5.0.1 неправильно завантажує альтернативні варіанти

Хороша новина – це більше не проблема. Єдиними проблемними браузерами були Chrome і Safari, а Chrome так не робить вже з версії 6 і Safari – з 5.1, а з тих пір пройшло вже три роки.

Додаткові ресурси

Дивіться блок CSS, що пояснює всі префікси/синтаксисы, на CSS3 Please!

Чи можна застосовувати градієнти

Документація Mozilla для лінійного градієнта, повторного лінійного градієнта, радіального градієнта і повторного лінійного градієнта.

Галерея градієнтів (з градієнтів можна робити запаморочливі візерунки)