Градиент радиальный css3: Радиальный градиент | htmlbook.ru

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

Анимация переходов

Долгое время дизайнеры были вынуждены использовать Adobe Flash и JavaScript для анимации переходов между изображениями. Больше этого делать не надо: прошли времена уродливых, часто безвкусных переходов Flash и сложных JS-анимаций. Благодаря CSS3 дизайнеры могут использовать чистое и легкое решение на стороне браузера (вместо массивного метода на стороне сервера). Существует два основных способа создать переход. Первый и наиболее простой способ: создать объявление перехода и запускать эффекты при помощи движения или наведения мыши, а также запускать анимацию с помощью простого изменения JS.

Градиенты

Устали возиться в Photoshop, пытаясь получить правильный градиент для кнопок? Вы не одиноки. К счастью, теперь и этого делать больше не нужно! Теперь CSS позволяет дизайнерам создавать красивые градиенты, которые отлично смотрятся на любом дисплее. А самое приятное – это то, что все это находится в красивом, легком CSS-файле, который поддерживается всеми браузерами и не требует тяжелых, ресурсоемких изображений. На самом деле градиенты в CSS существуют уже некоторое время, но только сейчас они стали поддерживаться всеми браузерами. Сегодня в CSS доступны радиальные и линейные повторяющиеся и неповторяющиеся градиенты, и, вероятно, скоро их станет больше.

Читайте также:

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

3D-преобразования

Давайте будем честными, иногда люди делают что-то только ради того, чтобы показать свое превосходство над менее опытными коллегами, и дизайнеры – не исключение. Если вы узнали себя, обратитесь к 3D-преобразованиям CSS3 – они помогут вашей работе выделиться на фоне остальных. Не стоит недооценивать легкий блеск в дизайне, особенно если вы хотите выделиться из толпы других дизайнеров.

Закругленные края кнопок

Закругленные углы кнопок смотрятся отлично. Они выглядят естественно. И они исторически были занозой для любого дизайнера. Кроме того, использование изображений могло быстро увеличить размер файла. Наконец-то кнопкам можно придать естественные закругленные края без лишнего кода! Используйте свойство CSS3 border-radius для создания простых закругленных краев, которые не влекут за собой лишней возни со свойствами высоты и ширины и не ломаются при изменении контента или местоположения. Давайте взглянем на пример.

CSS:

.box {
  border: 2px solid orange;
  border-radius : 25px;
  width: 100px;
  padding: 10px;
  text-align:center;
}

HTML:

  `<div>Submit</div>`

Свойство border-image

Наверняка вы часами просиживали в Photoshop и еще больше времени тратили на то, чтобы сделать рамку отзывчивой, потому что все стандартные варианты были непривлекательны, а вам хотелось сделать красивую рамку вокруг div или изображения.

Веб-шрифты

Кажется, еще вчера дизайнеры были вынуждены сверяться с таблицами и списками «безопасных» шрифтов. К счастью, те дни уже позади. Правило @font-face позволяет использовать сервисы типа Google Web Fonts и typekit для включения любого шрифта, который вы могли себе представить. Для этого достаточно просто включить новую таблицу стилей. Это означает, что ваш выбор типографики больше не ограничивается шрифтами, к которым может иметь доступ ваш конечный пользователь. Кроме того, больше не нужно указывать 12 различных семейств шрифтов, чтобы убедиться, что ваш текст не отображается уродливым стандартным шрифтом.

Столбцы CSS

Хотите сверстать текст в адаптивном макете со столбцами? Не так давно для этого было несколько вариантов.

Селекторы

Возможно, самое главное обновление – это новые селекторы CSS. Подробно рассказать о них всех в рамках маленькой шпаргалки невозможно, поэтому мы выделим только основные моменты (а с полным списком вы можете ознакомиться самостоятельно здесь). Мы по-прежнему можем использовать старые селекторы CSS2, но теперь у нас есть несколько новых правил. Все они сводятся к возможности выбирать элементы DOM на основе значений их атрибутов вместо указания идентификаторов и классов для каждого элемента.

Читайте также: Шпаргалка по CSS: основные селекторы

Градиенты: полный гайд для дизайнера

Алексей Коттов 08.09.2021

Содержание:

• Семь способов выразить индивидуальность
• Суть градиента и немного подробнее
• Виды градиентов

Одна из последних тенденций цифрового дизайна – градиенты. Несколько лет назад эта фишка тоже была на волне популярности, которая постепенно поутихла. Сегодня градиенты снова на пике моды графического дизайна. С их помощью можно красиво оформить пост или страницу, легко сделать баннер и заполнить контентом демо-сайт. Дальше мы поговорим о семи бесплатных инструментах для подборки градиентов.

Семь способов выразить индивидуальность

WebGradients

На этом портале вы найдете полный сборник готовых к работе градиентов. Библиотека включает 180 различных вариантов. В верхней части предусмотрены две ссылки для загрузки инструментов, одна из которых в PSD формате, другая – в Sketch.

Также существует возможность скачать градиенты кодом CSS3, который затем вписать непосредственно в сайт.

uiGradients

В библиотеке присутствует обширный выбор градиентов. В верхней части окна размещена кнопка Show all gradients, кликнув на которую вы откроете полный перечень элементов для оформления интерфейса страницы, блока или других деталей. Выбрав понравившийся вариант, просто скачайте код или загрузите его в формате jpg в нужную папку на компьютере.

CSS аниматор градиентов

Это прекрасный способ воплотить собственные фантазии в реальность. Здесь существует возможность взаимодействовать напрямую через CSS3, не используя JavaScript. Сбоку на панели кликните на кнопку Add colour, из выпавшей таблички выберите подходящий оттенок для каждого из двух заданных цветов градиента. Также существует возможность скорректировать скорость перехода цвета и просмотреть получившийся результат.

Colorzilla

Об этом сайте, пожалуй, не знает только самый ленивый веб-дизайнер. Это один из самых первых сервисов, при помощи которых дизайнеры могут генерировать градиенты. Это именно тот инструмент, который достоин быть у профессионала всегда под рукой.

ColorSpace

Отличный портал для подбора цветовых схем, оснащен собственным генератором градиентов, позволяющим к представленным вариантам добавить другие. Обладает удобным интерфейсом, однако сочетания одного и того же цвета можно выбрать всего 2 раза. Еще один плюс – в ColorSpace вы можете составить градиент не только из двух, а из нескольких оттенков.

Бесконечные градиенты

В верхней навигационной панели вы можете добавлять, блокировать, редактировать определенные опции вашего шаблон. Инструмент корректируется посредством мыши, где вы можете перетянуть холст и настроить желаемый переход, скопировать его код, и вставить в нужное место сайта. Это инструмент особенно часто используют художники.

Градиентные кнопки

Отличная библиотека с открытым кодом, в перечне которой представлены маленькие разноцветные кнопочки. Отличается большим выбором, разными классами размеров, шрифта и форм.

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

Суть градиента и немного подробнее

Современное искусство, а в частности графический дизайн использует градиенты для мягкого сочетания цветов. Данная технология подходит для изготовления:

• выразительных абстракций для рекламы:
• создания оригинальной упаковки, буклетов.

То есть, градиент в основном предназначен для привлечения внимания пользователя к чему-то важному в интерфейсе.

Градиенты способны минимизировать визуальный мусор на макетах, баннерах, в айдентике. К примеру, на фото с пейзажами эту технику можно использовать очень эффективно:

• Вставьте нужный текст в фотографию. Заметили, что он несколько сливается с фоном? То есть, вам придется разместить под текстом плашку или фигуру, чтобы выделить его. То есть, совершенно непривлекательный с точки зрения эстетики ход.
• Чтобы изначально исключить лишние детали, разместите под фото фон с мягким градиентом.

Еще несколько советов по графическому дизайну с использованием градиента:

• Если иллюстрации кажутся однообразными и невыразительными, просто примените градиент.
• Выделиться среди конкурентов вам тоже поможет эта техника. Возьмите, хоть значок «Инстаграм», согласитесь, простенько, но со вкусом.
• Для выделения объекта поверх фона можно использовать полупрозрачное затемнение или аналогичный градиент. Если элементы основы важны, то именно последний способ позволит оставить на виду большую часть информации.
• Чтобы сделать фото индивидуальным и недоступным для использования в сети другими сайтами, наложите на него полупрозрачный градиент с фирменными цветами.

Виды градиентов

В зависимости от того, где расположена отправная точка перехода, все градиенты можно поделить на 2 основных вида:

• Линейные используются преимущественно для оформления квадратных и прямоугольных областей.
• Радиальные – для круглых и овальных.

Чтобы градиент хорошо выглядел и был законченным, нужно правильно подбирать оттенки. Отлично смотрятся монохроматические и комплементарные комбинации. Если проще, то цвета, которые в спектре находятся ближе друг к другу. К примеру, градиент из розового и зеленого будет выглядеть несуразно и грязно.

Также следует подбирать цвета, несущие в себе определенную эмоциональную составляющую. Если вам нужно создать успокаивающий дизайн, используйте переход от зеленого к синему. Цветовая психология – мощный инструмент в руках профессионального графического дизайнера.

Когда вашей основной целью является продажа товара или услуги, выбирайте более яркие сочетания, к примеру, розовый, серый, оранжевый. В битве с градиентами с плоским дизайном 3D-варианты выиграют всегда. Оглядитесь вокруг – небо, с его плавными переходами от фиолетово-синего заката до розово-желтого восхода, поле, с изумрудной зеленью, плавно перетекающее в желтое жнивье и т. д. Лепестки цветов, листья деревьев, крылья бабочки, все это и многое другое истинного художника обязательно вдохновит на создание красивых образов. На курсах программирования, обсуждая данный предмет, об этом говорят постоянно.

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

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

Иногда для полноты картинки необходимо смешать не два, а несколько цветов. В этом случае введите промежуточный оттенок, чтобы сделать переход более привлекательным. Трехступенчатый градиент использует дополнительный оттенок в виде точки соединения между соединения двух цветов. Поиграйте с прозрачностью, оттенками, чтобы найти оптимальную комбинацию для создания собственного уникального дизайна.

Ценителям минимализма тоже стоит посоветовать применять градиент в надписях. Такой прием считается отличным способом привлечь внимание потребителя к важной информации. При этом, смотрится не вычурно, а вполне лаконично.

Не отставайте от последних тенденций моды, к которым, в частности, относится 3D-градиент. Фигуры, оформленные в этой технике выгодно смотрятся на баннерах, в презентациях, в дизайне сайтов.

Радиальные градиенты CSS3 — Веб-направления

Знакомство с радиальными градиентами CSS3

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

На этот раз мы подробно рассмотрим радиальные градиенты. Если у вас есть хорошее представление о том, как работают линейные градиенты, радиальные градиенты не должны представлять больших трудностей. И я снова представлю обновленный инструмент для создания радиальных градиентов, который поддерживает текущий синтаксис и работает во всех современных браузерах, поддерживающих радиальные градиенты (подробнее о них чуть позже).

Краткая история

Как и линейные градиенты, радиальные градиенты были впервые представлены в Webkit в 2008 году. Как и линейные градиенты, они все еще находятся в черновике спецификации CSS3, и действительно все еще находятся в состоянии постоянного изменения, так что это более чем возможно, окончательная указанная версия будет отличаться от описанной здесь. Как и в случае с линейными градиентами, радиальные градиенты, изначально предложенные командой Apple Webkit, имели другой синтаксис и весьма существенно отличались от того, как они определены в настоящее время, и от того, как они поддерживаются в текущих браузерах. В Safari 5.1 все современные браузеры согласовали синтаксис и концептуальную основу для радиальных градиентов, что мы и рассмотрим здесь. Safari 4 и Chrome 10 и более поздние версии поддерживают совершенно другой синтаксис и модель радиальных градиентов, которые фактически устарели и которые мы не будем здесь рассматривать.

Что именно

Я долго и упорно думал о том, стоит ли пытаться объяснить, что на самом деле происходит с радиальным градиентом (и для большинства людей просто поиграть с ними, вероятно, лучший способ разобраться с ними). Но, поскольку я еще не видел очень хорошего описания того, как именно работают радиальные градиенты, вот моя попытка.

Надеюсь, вы помните, что линейные градиенты имеют прямую

Некоторые распространенные линии линейного градиента

Затем мы указываем два (или более) цвета для создания градиента вдоль этой линии. Градиент «плавно переходит» от одного цвета к другому вдоль линии градиента. Итак, что именно означает «плавно исчезает»? Чтобы получить от вас все технические сведения, в модуле «Значения изображений и замененного содержимого» CSS3 говорится: «между двумя цветовыми точками цвет линии линейно интерполируется между цветами двух цветовых точек, причем интерполяция происходит в предварительно умноженном пространстве RGBA». . Рад, что ты спросил? А если ты на самом деле хочу разобраться с линейной интерполяцией, в спецификации есть целый раздел, посвященный этому.

Радиальные градиенты также задают линию градиента, но на этот раз линия идет от центра эллипса наружу в каждом направлении к краю эллипса. Вдоль этой линии цвет также «плавно исчезает» от одной цветовой паузы к другой.

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

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

По сути, чтобы указать радиальный градиент, мы задаем градиенту

• местоположение
• форма
• размер
• одна или несколько цветовых меток

Давайте рассмотрим каждый из них, хотя и немного не по порядку, потому что, чтобы понять, как они все работают, нам нужно немного понять, что такое эллипс (обещаю, это не повредит).

Эллипсы

Эллипс, показывающий большой и малый радиусы.

Эллипс — это то, что мы в просторечии называем овалом. Он отличается от круга тем, что его ширина и высота отличны друг от друга (строго говоря, круг — это разновидность эллипса, у которого ширина и высота равны).

Как вы можете видеть здесь, круг — это особый вид эллипса, в котором эти две линии имеют одинаковую длину.

Если провести вертикальную линию через эллипс в его самой высокой точке, а горизонтальную линию через его в самой широкой точке, то в месте их пересечения будет центр эллипса. Более длинная из этих двух линий называется большой полуосью или большим радиусом, а более короткая — малой полуосью или малым радиусом.

Из всего этого следует выделить ключевые понятия:

1. Что такое центр эллипса
2. Чему равен радиус эллипса

Положение радиального градиента

Мы задаем местоположение радиальному градиенту, указав, где его центр будет находиться по отношению к элементу, для которого он является фоновым изображением (на данный момент мы оставим в стороне случай, когда градиент используется в другом месте ).

Мы можем указать местоположение центра эллипса, по сути, так же, как мы указываем местоположение фонового изображения с помощью CSS-свойства background-position . Мы указываем горизонтальное положение фона и, возможно, вертикальное положение, используя либо ключевые слова (слева, по центру, справа или сверху, по центру, снизу), значения длины, процентные значения или некоторую их комбинацию. Например, у нас может быть

• слева внизу
• осталось 100%
• 0% снизу
• 0% 100%

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

Если второе значение опущено, оно обрабатывается как center (аналогично, если мы также опустим первое значение, центр эллипса градиента находится в центре фона элемента.)

Итак, начнем создание радиального градиента. Как мы видели с линейными градиентами, градиент не является свойством CSS. Скорее это значение, которое теоретически можно использовать везде, где может использоваться изображение, но на практике, как правило, только в качестве фонового изображения элемента. Здесь мы начнем с радиального градиента в качестве фонового изображения элемента и зададим ему местоположение. Мы поместим градиент в центр фона элемента.

 background-image:radial-gradient(50% 50%, 

Обратите внимание, что центральные значения по горизонтали и вертикали просто разделены пробелом, а затем за парой следует запятая. Также обратите внимание, что это еще не

Радиальный градиент формы и размеры

Теперь мы указали положение центра градиента, нам нужно указать форма и размер эллипса. Они могут быть указаны одним из двух способов: неявно или явно .

Явные формы и размеры

Мы явно указываем форму и размер эллипса для нашего радиального градиента, указывая длины большого и малого радиусов, используя длину или процентное значение. (по состоянию на июль 2011 года этот аспект радиальных градиентов не поддерживался ни одним браузером, поэтому мы рассмотрим его лишь кратко).

Например, мы можем указать ширину эллипса градиента как 50% ширины фонового элемента и 30% высоты элемента со значениями 25% 15% (обратите внимание, что эти значения указывают радиус, который составляет половину ширины или высоты). Если мы укажем одинаковые значения ширины и высоты, то два радиуса будут иметь одинаковую длину, и мы получим круговой градиент. Вот как будет выглядеть наш градиент с явно объявленными шириной и высотой

 background-image:radial-gradient(50% 50%, 25% 15%, 

Еще раз обратите внимание, значения ширины и высоты разделены только пробелом , а затем мы ставим после них запятую.0005

Неявные формы и размеры

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

Форма

Эта часть очень проста, мы просто используем одно из двух ключевых слов эллипс или круг , чтобы указать форму градиента. Итак, мы создаем эллиптическую форму для нашего градиента, например, так размер градиента неявно, мы указываем размер формы градиента, используя одно из нескольких ключевых слов. Каждое из этих ключевых слов определяет алгоритм для задания размера градиента. Эти алгоритмы иногда немного отличаются для эллипсов и кругов. Хотя на первый взгляд они могут показаться довольно сложные, они обретают смысл, как только вы поймете ключевой принцип каждого из них. Вот мой способ понять, что происходит с каждым ключевым словом.

Есть два дополнительных ключевых слова, содержит и охватывает . Ключевое слово содержит такое же, как ближайшая сторона , а ключевое слово покрытие совпадает с самый дальний угол .

Здесь мы дадим нашему градиенту размер ближайший угол .

 background-image:radial-gradient(50% 50%, эллипс, ближайший угол, 

Как и в случае расположения центра градиента, два значения ключевого слова разделяются пробелом, за которым следуют запятые

Цвет Stops

Теперь мы установили размер, форму и расположение градиента, нам осталось указать две или более точек цвета. позиция, которая представляет собой длину или процентное значение. В простейшем случае используются только значения цвета.

Если ограничители цвета указаны только со значениями цвета, то ограничители равномерно делят размер градиента. Итак, если есть 3 точки цвета, каждый цвет покрывает треть формы градиента и плавно переходит в соседние точки цвета.

Давайте рассмотрим пример. Вот простой круговой градиент. Его неявный размер соответствует ближайшему размеру к его центру, и он имеет три цветовых маркера: красный, зеленый и синий.

Обратите внимание, что каждая остановка отделена запятой.

А вот как это будет выглядеть в браузере, который поддерживает радиальные градиенты.

Если мы добавим больше точек, они просто будут равномерно распределены в том же размере, как здесь, где у нас есть 6 точек цвета, равномерно распределенных по размеру градиента.

 фоновое изображение: радиальный градиент (центр, круг, ближайшая сторона, #ff0000, #ff9f40, #fff81f, #050a99, #0b990f, #911c99, #d24fe0) 

Остановки цвета, как мы упоминали, могут дополнительно указывать длину или процентное значение. Таким образом, мы можем сделать точки цвета на определенном расстоянии друг от друга, например так:

 background-image:radial-gradient(center center, Circle Nearest-Side, #ff0000 25%, #19ff30 90%, #2f3ced 100%) 

Еще раз обратите внимание, цвет и положение каждой точки разделены пробелом, и снова каждая точка разделена запятой.

Можно также использовать значения длины, например px и em вместо процентов, и смешать все три формы цветовой остановки (только цвет, проценты и длины). Имейте в виду, что процентные градиенты адаптируются к размеру элемента, поэтому, когда он увеличивается или уменьшается в размере, градиент остается пропорциональным размеру элемента, и поэтому во многих случаях процентные градиенты останавливаются (или простые цветные останавливаются, указанные только по цвету), вероятно, будут наиболее адаптируемым выбором.

Окрашивание внутри и снаружи градиента

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

В этом последнем примере вы могли также заметить, что то же самое происходит внутри формы градиента. Наша первая цветовая точка находится на 25%, поэтому от центра градиента до 25% его ширины у нас сплошной красный цвет. Красный только плавно переходит в следующую цветовую точку, зеленую, на расстоянии 25% от центра формы градиента.

Конечные позиции фактически могут превышать 100% размера градиента, поэтому мы можем заполнить весь элемент градиентом, указав конечную позицию остановки, достаточно большую, чтобы весь элемент был покрыт градиентом.

Повторяющиеся градиенты

Как и линейные градиенты, радиальные градиенты могут повторяться. Это мы указываем с немного другим именем значения — Repeating-Radial-Gradient . Если мы возьмем наш предыдущий градиент и повторим его, вот что мы получим

 background-image: repeating-radial-gradient(center center, ближайшая сторона круга, #ff0000 25%, #19ff30 90%, #2f3ced 100%) 

Где у нас будет сплошной цвет за пределами формы градиента, теперь у нас есть повторяющийся градиент. Если мы уменьшим размер градиента, эффект станет более выраженным. В этом примере мы уменьшаем размер формы градиента, чтобы получить следующий неповторяющийся градиент.

 фоновое изображение: радиальный градиент (центр, центр, окружность, ближайшая сторона, # ff0000 0%, # 19ff30 29%) 

Теперь, если мы повторим градиент, эффект станет намного заметнее.

 background-image: Repeating-radial-gradient(center center, ближайшая сторона круга, #ff0000 0%, #19ff30 29%) 

Выполнение тяжелой работы за вас

Формы, размеры, центры, радиусы, останавливается… Если все это звучит так, будто вам нужно многому научиться и запомнить, то мы снова здесь, чтобы помочь. Как и в случае с линейными градиентами, мы создали инструмент радиального градиента, который помогает создавать градиенты без необходимости запоминать всю тяжелую работу.

Как и в случае с нашим инструментом линейного градиента, он не только помогает создавать радиальный градиент, но и имеет некоторые другие функции.

• Вы можете опубликовать ссылку на созданный вами градиент, просто нажав кнопку
• Вы можете скопировать URL-адрес своего градиента и отправить его кому-нибудь по электронной почте, поместить его в ссылку (как я сделал для многих из этих примеров) или иным образом поделиться им
• С помощью волшебства HTML5 localStorage он запоминает ваш последний градиент и другие настройки при следующем посещении
• Добавляет префиксы поставщиков для всех современных браузеров (как опция)
• Добавляет начальный цвет в качестве цвета фона для старых браузеров
• Существует родственный инструмент для создания градиентов Webkit в старом стиле
• Предоставляет самую последнюю информацию о совместимости браузера (при условии, что я не забуду обновить ее по мере изменения браузера)
• Выглядит очень красиво, конечно, благодаря CSS-градиентам

Так что попробуйте и дайте нам знать, что вы думаете.

Совместимость с браузерами

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

Для обеспечения совместимости и доступности при использовании радиальных градиентов, как и в случае с линейными градиентами, важно, чтобы

1. включали префиксы конкретных поставщиков (-o-, -ms-, -moz, -webkit-), а также стандартную форму значений градиента
2. включают цвет фона для браузеров, не поддерживающих градиенты. Убедитесь, что текст элемента с градиентным фоном имеет достаточный контраст с цветом фона элемента
.

Поддержка браузеров

Краткий обзор текущей поддержки браузерами радиальных градиентов CSS (на основе информации из фантастического журнала «Когда я могу использовать»).

• В Safari 4 появились радиальные градиенты, хотя, как отмечено, с синтаксисом, отличным от описанного здесь. Префикс поставщика -webkit- требуется для градиентов в Safari 4.1 и новее.
• Safari 5.1 представляет синтаксис, подробно описанный здесь, а также продолжает поддерживать синтаксис старого стиля. Опять же, требуется префикс поставщика -webkit-.
• Firefox 3.6 был первым браузером, поддерживающим текущий синтаксис градиента. Требуется префикс -moz-, и в настоящее время он поддерживается только в фоновом режиме.
• Chrome 10 и более поздние версии (и, возможно, более ранние версии) поддерживали описанный здесь синтаксис для градиентов. Префикс -webkit- обязателен.
• Opera 11.1 представила поддержку линейного градиента, но в настоящее время не поддерживает радиальные градиенты любого типа
• Internet Explorer 10 также поддерживает радиальные градиенты CSS с использованием префикса -ms- и только на фоне.

Градиенты могут требовать значительных вычислительных ресурсов и могут вызывать проблемы при работе браузеров на старом оборудовании.