• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
Стоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → CSS → Радиальный градиент CSS

Радиальный градиент CSS

Радиальный градиент - градиент для создания эффектов при переходе одного цвета в другой. В отличии от линейного градиента, здесь используется либо круговой, либо эллипсообразный переход. Направления изменения цвета идет в разных направлениях от центра. Радиальный градиент еще называют "круговым градиентом".

Радиальный градиент задается с помощью свойства radial-gradient совместно с background. У него есть довольно много параметров, которые мы рассмотрим последовательно.


Синтаксис CSS radial-gradient

background: radial-gradient([at позиция форма размер,] цвет1, цвет2,...);

Где:

  • позиция - начальные координаты Х и У (чаще всего задаются в процентах). Есть константы:
    • top - по центру сверху (50% 0%)
    • left top - верхний левый угол (0% 0%)
    • right top - верхний правый угол (100% 0%)
    • center (стоит по умолчанию) - центр области (50% 50%)
    • left center - слева по центру (0% 50%)
    • right center - справа по центру (100% 50%)
    • bottom - снизу по центру (50% 100%)
    • left bottom - слева снизу (0% 100%)
    • right bottom - справа снизу (100% 100%)
    Обязательно необходимо ключевое слово at.
  • форма — задание формы градиента. Есть два варианта:
    • circle - круг
    • ellipse - эллипс
  • размер — как будет растягиваться градиент. Может принимать следующие значения
    • closest-side - градиент стремится к ближайшей границе элемента.
    • closest-corner - градиент стремится к ближайшему углу.
    • farthest-side (по умолчанию) - градиент распространяется до дальней границы элемента.
    • closest-corner - градиент распространяется до дальнего угла элемента.
    Ниже будут приведена таблица с примерами
  • цвет1 - начальный цвет
  • цвет2 - конечный цвет

Цвет можно задавать в формате RGB, конкретный цвет или в фомрате rgba (см. коды цветов html для сайта).

Примечание 1

Можно задавать переход нескольких цветов через запятую.



В самом простом варианте можно задать только два цвета. Например

background: radial-gradient(#ADFF2F, #006400)

Примечание 2

Для браузеров нужно задавать это свойство с вендорными префиксами: -moz-,-webkit-, -ms-, -o-:

background: -moz-radial-gradient background: -webkit-radial-gradient background: -ms-radial-gradient background: -o-radial-gradient
Примечание 3

Свойство radial-gradient также можно сделать повторяющимся: repeating-radial-gradient

background: repeating-radial-gradient(circle, #8FBC8F, #8FBC8F .5em, transparent .5em, transparent 1.5em);

Примеры с радиальными градиентами

Пример 1. Разная позиция старта

Через ключевое слово at можно задавать позицию центра радиального градиента.

<html> <head> <style> .primer1{ width: 200px; height: 200px; background: radial-gradient(at 20% 50%, #ADFF2F, #228B22, #006400); margin: 10px; } .primer2{ width: 200px; height: 200px; background: radial-gradient(at 75% 40%, #ADFF2F, #228B22, #006400); margin: 10px; } .primer3{ width: 200px; height: 200px; background: radial-gradient(at 180px 40px, #ADFF2F, #228B22, #006400); margin: 10px; } .primer4{ width: 200px; height: 200px; background: radial-gradient(at top, #ADFF2F, #228B22, #006400); margin: 10px; } </style> </head> <body> <div class="primer1"></div> <div class="primer2"></div> <div class="primer3"></div> <div class="primer4"></div> </body> </html>

На странице преобразуется в следующее


Пример 2. Размер градиента

Ниже представлен пример, который показывает работу границы

<html> <head> <style> .primer5{ width: 400px; height: 150px; background: radial-gradient(circle closest-side at 70px 50px, #ADFF2F, #006400); margin: 10px; } .primer6{ width: 400px; height: 150px; background: radial-gradient(circle closest-corner at 70px 50px, #ADFF2F, #006400); margin: 10px; } .primer7{ width: 400px; height: 150px; background: radial-gradient(circle farthest-side at 70px 50px, #ADFF2F, #006400); margin: 10px; } .primer8{ width: 400px; height: 150px; background: radial-gradient(circle farthest-corner at 70px 50px, #ADFF2F, #006400); margin: 10px; } </style> </head> <body> <div class="primer5"></div> <div class="primer6"></div> <div class="primer7"></div> <div class="primer8"></div> </body> </html>

На странице преобразуется в следующее

closest-side
Ближайшая граница
closest-corner
Ближайший угол
farthest-side
Дальняя граница
farthest-corner
Дальний угол


Пример 3. Резкие переходы радиального градиента

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

background: radial-gradient(цвет1 20%, цвет2 70%, цвет3 100%)

Приведем практический пример

<html> <head> <style> .primer9{ width: 200px; height: 200px; background: radial-gradient(circle at center, #00FF7F 10%, #228B22 60%, #006400 70%, #211 100%); margin: 10px; } .primer9{ width: 200px; height: 200px; background: radial-gradient(circle at center, #000 5%, #fff 7%, #000 30%, #fff 80%, #000 83%); margin: 10px; } </style> </head> <body> <div class="primer9"></div> <div class="primer10"></div> </body> </html>

На странице преобразуется в следующее



Читайте также:
• Что такое JavaScript
• Что такое HTML
• Свойство font
• Свойство border
• Свойство background
• Свойство transition
• Коды символов для HTML
• Самые основные html теги
• Какой движок выбрать для сайта

← Перейти в каталог CSS уроков

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2022 - Zarabotat-Na-Sajte.ru