Від автора: Вітаю вас на нашому блозі про сайтобудуванні. CSS3 приніс нам багато можливостей в плані візуального оформлення сторінок. Зокрема, з’явилася можливість задавати в якості фону не тільки суцільний колір. У css3 градієнти стали одним з найбільш очікуваних нововведень. Давайте і ми розглянемо їх роботу.
Як використовувати градієнти
Отже, в css3 з’явилися лінійні і радіальні градієнти. Щоб використовувати будь-який з них, необхідно вказати наступне:
background: linear-gradient(параметри) або
background: radial-gradient(параметри)
Важливо, що градієнт можна задати саме властивість background (або background-image), background-color для цього не підійде!
Синтаксис лінійного градієнта
Отже, давайте розберемося з першим варіантом, тому що він трохи простіше.
background: linear-gradient(to right, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%);
Ось так убрався наш тестовий блок:
Отже, тепер давайте розберемося з синтаксисом. Першим з параметрів задається напрям, тобто в яку сторону буде направлено змінення кольорів. Бачимо, що в нашому випадку направо. Відповідно, можна в будь-яку іншу сторону, не забувайте писати з часткою to.
Щоб зробити діагональне напрямок, необхідно лише записати два слова – напрямок по горизонталі і вертикалі. Наприклад:
To top right – правий верхній від лівого нижнього.
To bottom left – лівий нижній з правого верхнього.
Тут нічого складного немає. Замість ключових слів ви можете задавати напрям в градусах (deg) від 0 до 360 градусів, причому можна писати негативні значення.
Наступним параметром йде колір. Він заданий rgba, хоча можна і в будь-якому іншому.
Далі в коді бачимо якісь відсотки. Це так звані колорстопы. Вони визначають, на якому проміжку цей колір буде найбільш насиченим.
Різкі переходи
Щоб зробити різкі переходи, треба писати однакові колорстопы для двох сусідніх кольорів. На словах пояснити складно, давайте краще на прикладі. Отже, створимо прапор, наприклад, Естонії, на чистому css. Я подивився в гуглі кольору, з яких він складається:
background: linear-gradient(to bottom, #290E2A 33%, black 33%, black 66%, white 66%);
Не ідентичний, звичайно, реального, але для прискорення процесу я не став дивитися точний відтінок. Найголовніше не це, а синтаксис властивості в цьому випадку: Як бачите, там, де закінчується перший колір, ми казываем колорстоп. Оскільки кольорів у прапорі 3, то логічно, що це 33%. Такий же колорстоп ми вказуємо і для наступного кольору, а потім пишемо його ще раз, щоб отримати різкий перехід від чорного до білого. Таким же способом можна зробити практично будь-прапор.
Радіальний градієнт
Має трохи інший синтаксис. Давайте знову подивимося на прикладі:
background: radial-gradient(ellipse at center, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 52%,rgba(6,109,171,1) 100%);
Тут спочатку задається тип колу (ellipse, ellipse cover) також визначається його положення, в нашому випадку в центрі. Все, після цього слід вже звичний нам синтаксис, знайомий з лінійним градієнтам.
Розібратися самостійно в цьому властивості дуже непросто, тому я також раджу вам переглянути відповідний урок з нашого преміум курсу з CSS3, якщо ви раптом захочете краще розібратися з тим, як це працює.
Величезну допомогу вам може принести так званий сѕѕ3 генератор градієнтів, який дозволяє створювати їх нескінченна кількість, будь-яких типів. Справа в генераторі можна дивитися код для різних браузерів.
Кросбраузерність
Ні для кого не секрет, що властивість підтримуються в більш-менш сучасних браузерах. Наприклад, якщо писати без префіксів, як я робив в цій статті, то працювати буде тільки в браузерах, починаючи від IE 10, Mozilla 16, Chrome 26 і Opera 12. Звичайно, більшість людей оновлюють, але все ж у деяких можуть стояти старі браузери і вони нашої краси не побачать.
Тут є два виходи. Перший дуже простий і полягає в тому, щоб поставити суцільний колір, але близький до градієнту. Це, мабуть, можливість забезпечити хоч якусь кросбраузерність в старих-старих версіях.
Другий, це використовувати вендорные префікси. Основні з них такі: -o – опера, -moz – Mozilla, -webkit – Chrome-ms – IE. Писати потрібно не перед самою назвою властивості, а перед значенням. Тобто так: -webkit-linear-gradient, а не так: -webkit-background: linear-gradient;
З мінусів можна відзначити, що це дуже сильно збільшує кількість коду у файлі стилів, навіть один градієнт в такому випадку може зайняти 20-30 рядків, але якщо кросбраузерність для вас критична, то це необхідно. Хоча можна використовувати постпроцессоры CSS. Autoprefixer, наприклад, автоматом додає ці префікси новими властивостями. Але це вже інша розмова.
Як бачите, те, що раніше було неможливим, сьогодні вже легко реалізується. Раніше, якщо по дизайну на сайті потрібен був градієнт, його вставляли у вигляді картинки, сьогодні не потрібно навіть цього. Якщо вам потрібна кросбраузерність, просто пропишіть властивість з вендорными префіксами, у більшості випадків цього вистачить для охоплення всіх веб-оглядачів, в яких сидять люди.
На цьому я закачую огляд даного властивості. Сподіваюся, ви почерпнули для себе корисні знання. Підписуйтесь на webformyself, щоб дізнатися ще більше про сайтобудуванні.
