Вы здесь: Главная » CSS » Создание градиента. Радиальный градиент

Создание градиента. Радиальный градиент

Радиальный градиент, как и линейный, создается в самом простом случае на основе 2-х цветов с помощью свойства background или background-image и значения radial-gradient():

В этом случае у вас будет черно-белый градиент из центра (первый цвет расположен в центре, второй - на краях блока)

Можно изменить направление градиента с помощью ключевого слова at и направления - top (вверху), bottom (внизу),  center (в центре), left (слева) или right (справа).

Кстати, можно указывать направление с помощью 2-х ключевых слов, например, at top left (слева сверху) или at right center, а также показать позицию цветового маркера (в каких-либо единицах измерений - px, em, ex, cm, mm, pt или %):

Здесь еще использовано ключевое слово circle, т.е. мы делаем круглый градиент. Можно также создавать радиальный градиент на основе эллипса (ключевое слово  ellipse):

Но эллипс является формой радиального градиента по умолчанию, поэтому, если вы не укажите ключевое слово эллипс, будет все также:

Еще можно задавать позицию центра градиента, как и положение его маркеров в %, px, em, pt и т.п.

See the Pen Radial Gradient.18892

Вы можете задать форму и размер градиента , указывая его в самом начале в скобках. Если задана одна цифра - градиент будет круглым, если 2 цифры - эллиптическим, причем первая цифра обозначает ширину, а вторая - высоту эллипса:

Смотрим на результат:

See the Pen Gradient Size .18892

Ключевые слова для радиального градиента

Для указания размера градиента можно использовать ключевые слова:

  1. closest-side — края градиента подогнаны к ближайшей стороне контейнера. Раньше использовалось еще значение contain, которое является аналогом closest-side.
  2. farthest-side — края градиента подогнаны к дальней стороне контейнера.
  3. closest-corner —края градиента подогнаны к ближайшему углу контейнера, градиент может частично скрываться за границами контейнера.
  4. farthest-corner — края градиента подогнаны к дальнему углу контейнера, градиент может быть частично скрыт границами.  Значение по умолчанию. Раньше использовалось еще значение cover, которое является аналогом farthest-corner.

Посмотреть Pen Radial Gradient Size.18892

Помните о совместимости со старыми версиями браузеров и необходимости указывать вендорные префиксы.

Ниже можно посмотреть пример использование радиального градиента на сайте. Это очень упрощенный макет.

See the Pen Radial Gradient in Layout18892

Большая Советская Энциклопедия на http://chitatel.info/ одна из самых обширных энциклопедий в мире.

3 комментария

  1. Начальную точку градиента можно задавать в любом месте элемента, для этого вначале указывается её позиция.

  2. Для элемента, у которого ширина равна высоте, как в примере с шариком, разница между типами градиента будет незаметна.

    • Между какими именно типами градиента? Линейный и радиальный будут отличаться в любом случае.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *