Радіальний градієнт створюється за допомогою властивості background або background-image із параметром radial-gradient . У найпростішому випадку для завдання радіального градієнта знадобиться лише два параметри: початковий та кінцевий колір. За замовчуванням початкова точка розташована при цьому в центрі. У прикладі 1 показано створення деякої подібності кульки, для цього використовується радіальний градієнт та заокруглення кутів.
Приклад 1. Градієнт
Градієнт
Результат цього прикладу показано на рис. 1. Зверніть увагу, що приклад коректно працює в IE10 та Opera 12, ранні версіїцих браузерів не підтримують радіальні градієнти, і не працює в Safari 5.1, який вимагає префіксу -webkit.
Мал. 2. Радіальний градієнт
Початкову точку градієнта можна задавати будь-де елемента, при цьому спочатку вказується її позиція.
Позиція точки пишеться аналогічно значенням властивості background-position за допомогою ключових слів або доступних одиниць виміру на кшталт пікселів чи відсотків; нижче наведено можливі поєднання.
at top left = at left top = at 0% 0% (у лівому верхньому кутку);
at top = at top center = at center top = at 50% 0% (по центру вгорі);
at right top = at top right = at 100% 0% (у правому верхньому кутку);
at left = at left center = at center left = at 0% 50% (ліворуч і центром);
at center = at center = at 50% 50% (по центру) - це значення за замовчуванням;
at right = at right center = at center right = at 100% 50% (з правого краю та по центру);
at bottom left = at left bottom = at 0% 100% (у лівому нижньому кутку);
at bottom = at bottom center = at center bottom = at 50% 100% (по центру внизу);
at bottom right = at right bottom = at 100% 100% (у правому нижньому кутку).
Якщо задати позицію початкової точки для прикладу 1 як at 40px 45px, а другий колір зробити дещо темнішим (#0076a5), то вийде трохи більш реалістична кулька (рис. 3).
Мал. 3. Зміна початкової точки градієнта
Можливі дві форми радіального градієнта – коло (circle) та еліпс (ellipse), які різняться своїм виглядом. За замовчуванням встановлюється еліптичний градієнт.
Різниця між круговим та еліптичним градієнтом для квітів #f9e497 та #ffb60f продемонстрована на рис. 4.
Для елемента, у якого ширина дорівнює висоті, як у прикладі з кулькою, різниця між типами градієнта буде непомітна.
У прикладі 2 показано створення кругового градієнта із заданою початковою точкою. Для посилення контрастності між кольорами використовується три значення кольору, а чи не два.
Приклад 2. Круговий градієнт
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Градієнт
Цей елемент допомагає у випадку, коли ви перебуваєте в усвідомленні того факту, що абсолютно не розумієте, хто і як вам може допомогти. Саме в цей момент ми підказуємо, що допомогти вам ніхто не зможе.
Зверніть увагу на синтаксис, якщо ми хочемо поєднувати форму градієнта із зазначенням початкової точки, то спочатку йде ключове слово circle, а потім уже через пробіл позиція. Результат цього прикладу показано на рис. 5.
Мал. 5. Круговий градієнт
Поряд із типом градієнта можна задавати і його розмір, який залежить від ключових слів, що застосовуються. Розмір пишеться через пропуск після типу градієнта (circle або ellipse).
У табл. 1 перераховані можливі значення розміру з їх описом та результатом для білого та чорного кольору. Код та вид дано для кругового та еліптичного градієнта.
Табл. 1. Ключові слова зміни розміру градієнта
Значення
Код
Опис
Вид
background: radial-gradient( circle closest-side at 30px 20px, #fff, #000);
background: radial-gradient(ellipse closest-side at 30px 20px, #fff, #000);
Форма градієнта збігається із найближчою до нього стороною блоку.
background: radial-gradient( circle closest-corner at 30px 20px, #fff, #000);
background: radial-gradient(ellipse closest-corner на 30px 20px, #fff, #000);
Форма градієнта обчислюється на підставі інформації про відстань до найближчого кута блоку.
background: radial-gradient( circle farthest-side at 30px 20px, #fff, #000);
background: radial-gradient(ellipse farthest-side at 30px 20px, #fff, #000);
Градієнт розповсюджується до дальньої сторони блоку.
farthest-corner
background: radial-gradient( circle farthest-corner at 30px 20px, #fff, #000);
background: radial-gradient(ellipse farthest-corner на 30px 20px, #fff, #000);
Форма градієнта обчислюється на підставі інформації про відстань до далекого кута блоку,
Для центральної початкової точки градієнти начебто й збігаються. Але градієнти розрізнятимуться, якщо встановити початкову точку в кутку. У прикладі 3 використовується значення із завданням початкової точки у пікселах.
Приклад 3. Розмір градієнта
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Градієнт
Вміст
Результат цього прикладу показано на рис. 6.
Мал. 6. Використання значення closest-corner
Подібно до лінійного градієнта можна вказувати кілька кольорів, встановлювати їх позицію і робити різкі переходи між кольорами. Для цього довільна кількість кольорів перераховується через кому, а після значення кольору через прогалину йде його позиція, яка може бути задана в пікселах або відсотках. Крайні значення 0% та 100% можна не писати, вони маються на увазі автоматично.
Різкі переходи виходять, коли позиція одного кольору збігається з позицією іншого, як показано в прикладі 4. Різниця в один піксел зроблено, щоб трохи згладити перехід, інакше виходить «драбинка» з пікселів, що виглядає не дуже красиво.
Приклад 4. Різкі переходи
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Градієнт
Результат цього прикладу показано на рис. 7.
Мал. 7. Різкі переходи між різними кольорами
Якщо лінійний і радіальний градієнт доповнити властивістю background-size , тоді ми отримаємо найрізноманітніші фонові картинки, що повторюються, які зроблені без використання зображень.
CSS-градієнтє переходи від одного кольору до іншого.
Градієнти створюються за допомогою функцій linear-gradient() та radial-gradient().
Градієнтний фон можна встановлювати у властивостях background, background-image, border-image та list-style-image.
Мал. 1. Лінія градієнта, початкова та кінцева точки та кут градієнта
Лінійний градієнтстворюється за допомогою двох і більше кольорів, для яких заданий напрямок, або лінія градієнта.
Якщо напрямок не вказано, використовується значення за промовчанням. зверху вниз.
Кольори градієнта за умовчанням розподіляються рівномірно у напрямі, перпендикулярному лінії градієнта.
Background: linear-gradient(кут/сторона або кут нахилу за допомогою ключового слова (пари ключових слів), перший колір, другий колір тощо);
Напрямградієнта може бути задано двома способами: за допомогою кута нахилув градусах deg значення якого визначає кут нахилу лінії всередині елемента.
Div ( height: 200px; background: linear-gradient(45deg, #EECFBA, #C5DDE8); )
за допомогою ключових слів to top , to right , to bottom , to left , які відповідають куту градієнта, що дорівнює 0deg , 90deg , 180deg і 270deg відповідно.
Div ( height: 200px; background: linear-gradient(to right, #F6EFD2, #CEAD78); )
Якщо напрямок задано парою ключових слів, наприклад, to top left, то початкова точка градієнта буде розташована в протилежному напрямку, в даному випадку справа внизу.
Div ( height: 200px; background: linear-gradient(to top left, powderblue, pink); )
Для нерівномірного розподілу кольорів вказується початкова позиція кожного кольору через точки зупинки градієнта, звані color stops. Точки зупинкизадаються у % , де 0% - початкова точка, 100% - кінцева точка, наприклад:
Радіальний градієнтвідрізняється від лінійного тим, що кольори виходять із однієї точки (центру градієнта) і рівномірно розподіляються назовні, малюючи форму кола чи еліпса.
Background: radial-gradient(форма градієнта/розмір/позиція центру, перший колір, другий колір тощо);
Форма градієнтавизначається ключовими словами circle або ellipse. Якщо форма не задана, за умовчанням радіальний градієнт набуває форми еліпса.
Div ( height: 200px; background: radial-gradient(white, #FFA9A1); )
Позиція центрузадається за допомогою ключових слів, що використовуються як background-position , з додаванням приставки at . Якщо позиція центру не задана, використовується значення за промовчанням at center .
Div ( height: 200px; background: radial-gradient(at top, #FEFFFF, #A7CECC); )
За допомогою пари значень, зазначених в одиницях довжини % , em або px можна керувати розміром еліпсообразного градієнта. Перше значення задає ширину еліпса, друге висоту.
Div ( height: 200px; background: radial-gradient(40% 50%, #FAECD5, #CAE4D8); )
Розмір градієнтазадається за допомогою ключових слів. Значення за замовчуванням farthest-corner (до далекого кута).
div ( height: 200px; background: radial-gradient( circle farthest-corner at 100px 50px, #FBF2EB, #352A3B); )
За допомогою радіального градієнта можна створювати реалістичні об'ємні фігури, такі, як м'ячі, кнопки.
М'яч
div ( width: 200px; height: 200px; border-radius: 50%; margin: 0 auto; background: radial-gradient( circle at 65% 15%, aqua, darkblue); )
На додаток до лінійного та радіального градієнтів існує повтор градієнта, який задається за допомогою функцій repeating-linear-gradient() і repeating-radial-gradient() відповідно. Фон з градієнтів, що повторюються, виглядає неакуратно, тому рекомендується починати наступний колір з точки зупинки попереднього, створюючи таким чином смугасті візерунки.
Background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1-6.0 */ background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6-12.0 */ background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6-15 */ background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Стандартний синтаксис */
5. Комбінація градієнта та фонового зображення
За рахунок комбінації градієнта та зображення можна створювати цікаві ефекти. Для градієнта потрібно використовувати напівпрозорі кольори, щоб зображення залишалося видимим.
div ( height: 453px; background: linear-gradient(45deg, rgba(103, 0, 31, .8), rgba(34, 101, 163, ..jpg); background-size: cover; ) CSS функції
Визначення та застосування
CSS функція radial-gradient() (радіальний градієнт) розташовується вздовж свого радіусу, виходячи назовні з центру елемента за круговою або еліптичною формою, при цьому кольори градієнта рівномірно розподіляються по всьому простору елемента.
Принцип створення радіальних градієнтів схожий на створення лінійних градієнтів (linear-gradient()), для цього достатньо вказати початковий колір - він розташовуватиметься в середині градієнта і кінцевий колір, який буде розташований наприкінці градієнта.
Докладніше про роботу з градієнтами ви можете ознайомитись у статтях «» та «». Звертаю Вашу увагу, що у статтях висвітлено нюанси роботи зі старими браузерами та наведено численні приклади.
Підтримка браузерами
Функція
Opera
IExplorer
Edge
radial-gradient()
26.0 10.0 -webkit-
16.0 3.6 -moz-
12.1 11.1 -o-
6.1 5.1 -webkit-
10.0
12.0
CSS синтаксис:
background-image / background : radial-gradient ([форма keyword (або розмір )] ат позиція x-axis y-axis , колір 1 – зупинка 1, . . . , колір n – зупинка n);
Форма
Еліптична формавизначається значенням ellipse , яке є значенням за замовчуванням (відсутність його вказувати), а кругла форма визначається значенням circle .
Keyword
Градієнт розраховується виходячи з відстані до найближчої/дальньої сторони, або найближчого / далекого кутаелемент.
Значення
Опис
closest-side
Градієнт розраховується виходячи з відстані до найближчої сторони елемента від центру для круглих градієнтів ( вісь xабо вісь y) і до найближчих сторін ( вісь xі вісь y) якщо градієнт у формі еліпса. background-image : radial-gradient; background-image : radial-gradient(ellipse closest-side at 60% 60%, plum, black, orange);
closest-corner
Градієнт розтягується так, щоб він проходив через найближчий до центру кут елемента (розмір розраховується залежно від відстані до найближчого кута елемента). background-image: radial-gradient;
background-image: radial-gradient(ellipse closest-corner at 60% 50%, plum, black, orange);
farthest-side
Градієнт розраховується виходячи з відстані до дальньої сторони елемента від центру для круглих градієнтів ( вісь xабо вісь y) і до найближчих сторін ( вісь xі вісь y) якщо градієнт у формі еліпса. background-image: radial-gradient;
background-image: radial-gradient(ellipse farthest-side на 100% 50%, plum, black, orange);
farthest-corner
Градієнт розтягується таким чином, щоб він проходив через далекі від центру кути елемента (розмір розраховується в залежності від відстані до дальнього кута елемента). Це значення за промовчанням.background-image: radial-gradient;
background-image: radial-gradient(ellipse farthest-corner at 60% 60%, plum, black, orange);
Розмір
Встановлює розмір форми градієнта. Значення circle або ellipse при цьому не треба вказувати, заборонено використовувати ключові словаякщо вказано розмір. Якщо вказати одне значення, то воно буде розцінено браузером як . Якщо вказати два значення, то перше значеннябуде розцінено браузером як горизонтальний радіус, а друге значенняяк вертикальний радіус для еліптичного елемента.
Звертаю Вашу увагу, що забороняється використання відсоткових значень, якщо ви вказуєте лише одне значення(Радіус для круглого елемента), при використанні двох значень(Для еліптичного градієнта) допускається вказувати ці значення у відсотках.
Позиція
Початкова позиція радіального градієнта визначається ключовим словом - center, але може бути змінена з використанням одиниць виміру довжини(наприклад: pxабо em), відсотковими значеннямиі ключовими словами, які використовуються в CSS властивості background-position , відповідає за положення (позицію) фонового зображення.
Значення
Опис
left top left center left bottom right top right center right bottom центр top center center center bottom
Визначає положення зображення. Перше значення - горизонтальне положення, а друге значення - вертикальне. Якщо ви вказуєте лише одне ключове слово, інше значення буде "center"
x% y%
0% 0%
(це значення за замовчуванням). В правому нижньому куті 100% 100%.
Якщо вказано лише одне значення, то інше значення буде 50%.
x y
Визначає положення зображення. Перше значення - горизонтальне положення, а друге значення - вертикальне. Лівий верхній кут має 0 0.
Значення можуть бути в пікселях або інших одиницях вимірювання CSS. Якщо вказано лише одне значення, то інше значення буде 50%.
Ви можете спільно використовувати відсоткиі одиниці виміру.
Колір
Допускається використовувати не тільки «Зумовлені кольори», а й будь-які «» шістнадцяткові(HEX), значення кольору RGB/-A та HSL/-A.
Зупинка
Значення точок зупинки (color stops) задаються в одиницях виміру довжини(наприклад – pxабо em) і в відсоткові значення. Точка зупинки повідомляє браузеру, що градієнт по радіусу повинен досягти заданого кольору до заданого значення і плавно перейти до наступного кольору, якщо він є.
Приклад використання
Давайте з Вами розглянемо радіальні градієнти кругової та еліптичної форми, побачимо, в чому полягає їхня відмінність на наступному практичному прикладі:
Приклад використання радіальних градієнтів
У цьому прикладі ми створили чотири блоки і поставили для них радіальні градієнти. Верхні блоки мають еліптичну форму, а нижні блоки круглу форму.
Розглянемо приклад позиціонування радіального градієнта.
Приклад позиціонування радіальних градієнтів
at 5px 45px
class = "test2" > at 50% top
class = "test3" > at top left
at 0% bottom
class = "test5" > at center bottom
class = "test6" > at 100% 100%
У цьому прикладі ми створили шість блоківз різними формами градієнтів (кругові та у формі еліпса) і позиціонували градієнт для кожного блоку за своїм, вказуючи значення в пікселях, відсоткахта з використанням ключових слів.
Звертаю Вашу увагу, що якщо радіальний за замовчуванням градієнт позиціонований по центру, а елемент має квадратну форму, то ви не побачите різниці між круговим градієнтом і градієнтів у формі еліпса.
Розглянемо приклад використання точок зупинки радіального градієнта:
У цьому прикладі ми створили шість блоків: три верхні блокивідрізняються від трьох нижніхтільки по формі градієнта, ключові точки вказані ті ж:
Перший та четвертий блок – двоколірний градієнтчервоний колір, який плавно переходить у зелений, що займає частину елемента.
Другий та п'ятий блок – триколірний градієнт, в якому 10% від центру займає червоний колір, який плавно переходить у зелений, з точкою зупинки 50%, він у свою чергу плавно переходить у синій, який займає всю частину елемента, що залишилася.
Третій та шостий блок – триколірний градієнт, в якому 50% від центру займає червоний колір, який плавно переходить у зелений, з точкою зупинки 85%, він у свою чергу плавно переходить у синій, який займає всю невелику частину елемента, що залишилася.
Давайте розглянемо, як керувати розміром радіального градієнта CSS.
Приклад вказівки розміру для радіальних градієнтів
У цьому прикладі ми створили три блоки:
Перший блок– ми вказали одне значення 50px, яке було розцінено браузером як радіус для круглого градієнта. Вказали для градієнта 7 кольорів. Зверніть увагу, що крайній колір заповнює область, що залишилася.
Другий блок– ми вказали два значенняв процентах : перше значення - горизонтальний радіус, а друге значення - вертикальний радіусдля еліптичного градієнта. Вказали для градієнта 8 кольорів. Зверніть увагу, що крайній колір ми вказали білий, який і заповнив область, що залишилася.(один із варіантів, щоб залишити тільки форму градієнта).
Третій блок– ми вказали два значенняв одиницях виміру довжини (pxі em): перше значення - горизонтальний радіус, а друге значення - вертикальний радіусдля еліптичного елемента. Вказали для градієнта 7 кольорів.
Радіальні градієнти малюються інакше, ніж лінійні. Якщо кольори лінійних розташовуються перпендикулярно до лінії, що задає напрямок, то в радіальних кольорах розходяться від заданого центру, а градієнт може набувати форми кола або еліпса.
Для найпростішого градієнта достатньо задати лише кольори:
Background: radial-gradient(gold, orangered);
За замовчуванням центр градієнта знаходиться по центру, градієнт має форму еліпса:
Крім кольорів градієнту можна задавати форму, положення та розмір. Параметри поєднуються і поводяться складніше, ніж у лінійних градієнтах.
Форма(кінцева фігура градієнта) може бути колом та еліпсом. За замовчуванням - еліпс, градієнт прагне зайняти весь вільний простір елемента, витягуючись, якщо це потрібно.
Щоб градієнт мав форму кола – це потрібно задати явно за допомогою ключового слова circle.
Якщо форма не задана, але заданий розмір – одне значення задає радіус кола, якщо значень два – градієнт набуває форми еліпса. За наявності розмірів, явне завдання форми градієнта ігнорується.
Становищевизначає де буде розташовано центрградієнта. Використовуються ті ж ключові слова, що і для лінійного градієнта, але з приставкою at: at top, at right, at bottom, at left і at center - значення за замовчуванням.
Їх також можна поєднувати між собою, щоб розташувати градієнт на заданій стороні, наприклад: at right top - у верхньому правому кутку.
Нижче можна побачити як працюють різні положення:
Код першого квадрата:
Background: radial-gradient(at top left, purple, crimson, orangered, gold);
Також можна задавати точне положення градієнта, наприклад at 20% 50% або at 10px 150px.
Розмірвизначає розміри кінцевої постаті градієнта. Для еліптичних градієнтів значення можна задавати у відсотках, для круглих – ні.
Якщо встановлено одне значення - воно вважається радіусом круглого градієнта. Якщо задано два значення – перше вважається горизонтальним радіусом еліпса, друге – вертикальним.
Нижче наведено приклади круглих і еліптичних градієнтів. Форма фігури визначається заданими розмірами:
Також можна використовувати ключові слова:
closest-side - градієнт закінчується біля межі елемента найближчого до центру градієнта. Якщо це еліпс, градієнт стосується всіх меж елемента. farthest-side - градієнт закінчується біля дальньої межі елемента. Якщо це еліпс, градієнт стосується всіх меж елемента. closest-corner – кінцева фігура розтягується таким чином, щоб вона проходила через кут елемента, що найближчий до центру градієнта. Якщо кінцева фігура – еліпс, градієнт розтягується на всю фігуру. У цьому параметрі градієнт заповнює собою всю фігуру, частково виходячи її межі. farthest-corner - аналогічно closest-corner, тільки кінцева фігура проходить через кут, далекий від центру градієнта. Значення за замовчуванням.
Деяким градієнтам додано положення at bottom , щоб було краще видно дію коду:
Радіальний градієнт може бути повторюваним - це repeating-radial-gradient .
Як і у випадку з лінійним градієнтом, повторюється градієнт не дуже акуратно малюється.
Поєднуючи кілька фонів з різними параметрами, можна отримати дивовижні речі:
Якщо при створенні візерунків використовувати відносні одиниці (em, %), а не абсоюлютні (px), розмір патернів, що виходять, потім можна буде легко регулювати змінюючи тільки розмір шрифту.
Градієнтне тло
Градієнти CSS дозволяють відображати плавні переходи між двома або більше зазначених кольорів.
Для створення лінійного градієнта необхідно визначити щонайменше двох колірних обмежувачів. Обмежувачі кольорів - це кольори, які ви хочете зробити плавними переходамиміж ними. Можна також задати початкову точку та напрямок (або кут) разом з ефектом градієнта.
Можна зробити градієнт діагоналі, вказавши як горизонтальні, так і вертикальні початкові позиції.
У наступному прикладі показаний лінійний градієнт, що починається у лівому верхньому кутку (і прямує в нижній правий кут). Воно починає червоно, переходячи до жовтого кольору:
Якщо потрібний більший контроль над напрямом градієнта, можна визначити кут, а не зумовлені напрямки (знизу, зверху, праворуч, ліворуч, вниз праворуч тощо).
Note:Internet Explorer 9 and earlier versions не підтримують послідовності.
"/> Перегляд демо в редакторі
Використання прозорості
CSS градієнти також підтримують прозорість, яка може бути використана для створення ефектів згасання.
Щоб додати прозорість, ми використовуємо функцію RGBA () для визначення обмежувачів кольору. Останній параметр функції RGBA () може бути значенням від 0 до 1, і він визначає прозорість кольору: 0 вказує на повну прозорість, 1 вказує на повний колір (без прозорості).
У наступному прикладі показаний лінійний градієнт, що починається зліва. Він починає повністю прозорим, переходячи до повного червоного кольору:
Мал. 1. Лінія градієнта, початкова та кінцева точки та кут градієнта 
