CSS3 градієнти на пальцях

Багато з вас вже мабуть бачили галерею CSS3 бекґраундів. Вона стала дуже популярною протягом останнього року і показала багатьом розробникам наскільки потужним інструментом є CSS3 градієнти. Але чи багато з них розуміють як вони створені? Найбільшою перевагою css-генерованих фонів - є те, що вони можуть бути змінені прямо з таблиці стилів. Не буде жодної вигоди, якщо ви просто копіпастимете css код не розуміючи його.

Хазяйці на замітку

В наступних прикладах будуть використовуватись градієнти без вендорних префіксів для кращого читання та стислості. В будь-якому випадку вам слід пам'ятати, що в реальності потрібно використовувати вендорні префікси (-moz-, -ms-, -o-, -webkit-) так як жоден браузер не підтримує їх без префіксів. Як альтернативу, ви можете використовувати -prefix-free, який автоматично підставить потрібний для поточного браузера, коли потрібно.

Синтаксис описаний тут є єдиним, який зараз підтримують браузери. Специфікація змінилась, але жоден браузер не підтримує їх зараз. Якщо ви зацікавлені в тому що буде потім, то подивіться на розробницьку версію специфікації.

Якщо ви ще не знайомі з css градієнтами, можете почитати відмінні туторіали від Джона Олсопа і повернутись назад сюди, бо в наступній частині статті я вважатиму що ви вже знаєте базові знання по css гардієнтам:

• CSS3 Linear Gradients
• CSS3 Radial Gradients

Головна ідея

Думаю більшість з вас уявляє який фон задасть цей код:

background: linear-gradient(left, white 20%, #8b0 80%);

Це простий градієнт від одного кольору до іншого, який виглядає як цей:

Ймовірно ви знаєте що в цьому випадку перші 20% ширини контейнера залиті білим, а інші 20% зеленим. Інші 60% - це плавний градієнт між цими кольорами. Давайте спробуємо пересунути ці позиції кольорів ближче один до одного:

background: linear-gradient(left, white 30%, #8b0 70%);

background: linear-gradient(left, white 40%, #8b0 60%);

background: linear-gradient(left, white 50%, #8b0 50%);

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

background: linear-gradient(left, white 30%, #8b0 30%);

background: linear-gradient(left, white 90%, #8b0 90%);

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

Комбінуємо з background-size

Ми зможемо робити чудеса, коли об'єднаємо це з CSS3 background-size правилом.

background: linear-gradient(left, white 50%, #8b0 50%);
background-size: 100px 100px;

Ось воно. Ми щойно створили найпростіший з візерунків: вертикальні смуги. Можна забрати перший папраметер (left), або замінити його на top і отримаємо горизонтальні лінії. Проте, скажімо прямо: горизонтальні та вертикальні смуги дещо нудні. Більшість смугастих фонів, які ми бачимо в інтернеті є діагональними. Давайте спробуємо зробити їх.

Першою спробою буде зміна кута градієнту на 45deg . Отримаємо такий жахливий візерунок:

Перед тим як читати далі задумайтесь на секунду чому ми не отримали бажаний результат? Ви можете це вияснити?

Причина в тому, що кут градієнту повертає не кожен шматочок візерунка окремо, а не весь фон. Чи не була у вас така сама проблема коли ви намагались зробити діагональні смуги за допомогою зображень? А потім ви дізнались, що кожну смугу потрібно включати два рази, наприклад:

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

background: linear-gradient(45deg, white 25%,
    #8b0 25%, #8b0 50%, 
    white 50%, white 75%, 
    #8b0 75%);
background-size:100px 100px;

І ось наші діагональні смуги! Простий спосіб запам'ятати порядок відсотків і кольорів полягає в тому, шо вам завжди потрібно дві однакові послідовності, за вийнятком першого і останнього кольорів.

Нотатка: Файрфокс для Маку потребує додаткового 100% колор стопу в кінці кожного візерунку в якому є більше двох колор стопів, наприклад: ..., white 75%, #8b0 75%, #8b0). Баг відправлений в лютому 2011 і ви можете проголосувати за нього та слідкувати за прогресом в Багзіллі.

На жаль, це лише хак, і коли попробуємо змінити кут на наприклад 60deg:

Не дуже зрозуміло після всього, правда? На щастя, CSS3 дає нам ще один спосіб оголошення таких фонів, який допоможе в цьому ввипадку, ще й з більш коротким результатом:

background: repeating-linear-gradient(60deg, white, white 35px, #8b0 35px, #8b0 70px);

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

Multiple backgrounds

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

background: radial-gradient(circle, white 10%, transparent 10%),
radial-gradient(circle, white 10%, black 10%) 50px 50px;
background-size:100px 100px;

Зверніть увагу, що обоє градієнтів мають майже однаковий вигляд, але розташовані по-різному, щоб створити ефект "полька точка". Єдина відмінність в тому, що перший (верхній) градієнт має transparent замість black. Якщо б він мав прозорих регіонів, то виглядало б так як ніби існував тільки верхній, оскільки він би перекривав все під собою.

Існує одна проблема з цим фоном. Можете визначити її?

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

background: black;
background: radial-gradient(circle, white 10%, transparent 10%),
radial-gradient(circle, white 10%, black 10%) 50px 50px;
background-size:100px 100px;

або оголосити кожну background властивість окремо:

background-color: black;
background-image: radial-gradient(circle, white 10%, transparent 10%),
radial-gradient(circle, white 10%, transparent 10%);
background-size:100px 100px;
background-position: 0 0, 50px 50px;

Пильні серед вас мали б помітити, що в останньому прикладі було змінено другий градієнт так, щоб у нього були прозорі області. Таким чином background-color служить двом цілям: він встановлює як резервний колір, так і колір фону "полька точка", так що ми можемо змінити його за допомогою тільки одного редагування. Завжди прагніть зробити код, який може бути змінений з найменшою кількістю редагувань.

Ми можемо застосувати ту ж саму техніку з лінійних градієнтів, з метою створення шахової моделі з прямокутних трикутників:

background-color: white;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%), 
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%);
background-size:100px 100px;
background-position: 0 0, 50px 50px;

Використовуйте правильні одиниці

Не використовуйте пікселі для розмірів не подумавши. В деяких випадках em буде більш доцільно використати. Для прикладу, коли ви хочете зробити фон у вигляді пареру з лініями і щоб лінії слідували за текстом. Якщо ви будете використовувати пікселі, то доведеться міняти розмір кожного разу коли ви міняєте font-size. Якщо ви вкажете background-size в em-ах, лінії природно слідуватимуть тексту і вам залишиться змінити його тільки коли ви зміните висоту рядка.

Це можливо?

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

• смужки
• правильні прямокутники
• круги та еліпси
• півкола і інші форми утворюються з нарізки еліпсів по горизонталі або вертикалі

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

Те що ви можете — не означає, що повинні

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

• жодних додаткових HTTP запитів
• короткий код
• зручно-читаний код (на відміну від data URI), який можна змінити прямо з CSS файлу.

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

• вони не короткі
• вони незрозумілі - їх зміна вимагає набагато більше зусиль

Досі залишається один HTTP запит, але є data URI.

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

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

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

Підтримка браузерами

CSS градієнти підтримуються Firefox 3.6 +, Chrome 10 +, Safari 5.1 + та Opera 11,60 + (лінійні градієнти з Opera 11.10). Підтримка цієї смакоти буде аж з приходом Internet Explorer 10. Також, ви можете отримати градієнти в старих версіях WebKit (у тому числі більшість мобільних браузерів), використовуючи власні -webkit-gradient(), якщо ви дійсно їх потребуєте.

Епілог

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

Щасливих свят!

P.S. Вільний переклад цієї статті.