css.in.ua
Підтримати

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% градієнта.
Порада:

Експериментуйте з різними комбінаціями параметрів, такими як форма, розмір і положення, щоб створити бажаний ефект градієнта.
Порада:

Використовуйте кольорові зупинки (color-stops), щоб визначити плавний перехід між кольорами в градієнті.
Порада:

Варто використовувати префікси властивостей -webkit-, -moz-, -o- та -ms- для кращої сумісності з різними браузерами.
Нотатка:

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

Синтаксис

radial-gradient([shape] [size] [position]?, [color-stop1], [color-stop2], ...);
<shape>

Визначає форму градієнта. Можливі значення: circle (коло), ellipse (еліпс), closest-side, closest-corner, farthest-side, farthest-corner.

<size>

Визначає розмір градієнта. Можливі значення: closest-side, closest-corner, farthest-side, farthest-corner, <length>, <percentage>.

<position>

Визначає положення градієнта. Можливі значення: <position-keyword>, <position-x> <position-y>.

<color-stop>

Визначає колір і позицію градієнта. Можливі значення: <color> (кольори), <percentage> (позиція градієнта у відсотках), <length> (позиція градієнта у пікселях).

Переглядачі

Переглядач

26

16

7

12.1

12
Переглядач

37

26

16

7

Мобільних переглядачів ще не додано.

Приклади


Цей приклад ілюструє зміну градієнта при взаємодії з елементом.

Цей приклад демонструє два однакових елементи з різними градієнтами.

Спільнота

Зв'язок