CSS function radial-gradient
Опис
Функція radial-gradient() дозволяє створювати градієнти, що поширюються від одного центру до іншого. Вона приймає параметри, що визначають форму, розмір, положення і кольори градієнта. Ця функція зазвичай використовується для створення ефектів освітлення, тіней, внутрішньої і зовнішньої тіней та інших елементів дизайну.
Функція radial-gradient() приймає один або більше аргументів - кольорові зупинки, подібно до функції linear-gradient(). Кожна кольорова зупинка визначає точку на радіальній формі, де кольори змінюються. Ви можете вказати кольори в різних форматах, таких як ключові слова, шістнадцяткові значення або RGB значення. Наприклад, radial-gradient(red, blue) створить радіальний градієнт, що переходить від червоного до синього кольору.
Використання функції radial-gradient() дозволяє створювати різноманітні градієнтні ефекти з круговим або еліптичним переходом кольорів. Ви можете контролювати точки зупинки кольорів, розташування центру градієнта, форму градієнта та навіть використовувати додаткові значення, такі як прозорість або режим змішування.
Наприклад:
radial-gradient(circle, closest-side, red, blue): радіальний градієнт у формі кола, з розміром, що найближчий до сторони контейнера, починаючи з червоного кольору і закінчуючи синім кольором.radial-gradient(ellipse 50% 50%, closest-corner, red 20%, blue 80%): радіальний градієнт у формі еліпса, з центром в 50% по ширині і 50% по висоті, розтягнутим до найближчого кута, починаючи з червоного кольору на 20% градієнта і закінчуючи синім кольором на 80% градієнта.
- Порада
-
Експериментуйте з різними комбінаціями параметрів, такими як форма, розмір і положення, щоб створити бажаний ефект градієнта.
автор: Bond - Порада
-
Використовуйте кольорові зупинки (
автор: Bondcolor-stops), щоб визначити плавний перехід між кольорами в градієнті. - Порада
-
Варто використовувати префікси властивостей
автор: Bond-webkit-,-moz-,-o-та-ms-для кращої сумісності з різними браузерами. - Нотатка
-
Функція
автор: Bondadial-gradient()є корисним інструментом для стилізації веб-сайтів, особливо коли вам потрібно створити ефекти, що пов'язані з круговими або еліптичними формами, такими як кнопки, фонові зображення, піктограми тощо. Вона дозволяє вам створювати привабливі та виразні градієнтні елементи, які надають вашому веб-сайту візуальну привабливість і оригінальність.
Синтаксис
radial-gradient([shape] [size] [position]?, [color-stop1], [color-stop2], ...);Функція radial-gradient може отримувати 4 значень:
-
<shape> -
Визначає форму градієнта. Можливі значення:
автор: Bondcircle(коло),ellipse(еліпс),closest-side,closest-corner,farthest-side,farthest-corner. -
<size> -
Визначає розмір градієнта. Можливі значення:
автор: Bondclosest-side,closest-corner,farthest-side,farthest-corner,<length>,<percentage>. -
<position> -
Визначає положення градієнта. Можливі значення:
автор: Bond<position-keyword>,<position-x> <position-y>. -
<color-stop> -
Визначає колір і позицію градієнта. Можливі значення:
автор: Bond<color>(кольори),<percentage>(позиція градієнта у відсотках),<length>(позиція градієнта у пікселях).
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 26 | 16 | 7 | 12.1 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 26 | 16 | 7 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад ілюструє зміну градієнта при взаємодії з елементом.
Цей приклад демонструє два однакових елементи з різними градієнтами.
Коментарі
Коментарів ще немає — будьте першим!