Радиальные фоновые градиенты

Фоновые градиенты CSS3 не ограничиваются линейными. С той же легкостью можно создавать и радиальные градиенты. Они начинаются с «центральной точки» и плавно расходятся в стороны эллиптически или кругообразно.

Вот синтаксис радиального фонового градиента:

Background: radial-gradient (center, ellipse cover, #ffffff 72%,

#dddddd 100%);

Если добавить это объявление в наше правило #content, то результат будет следующим (рисунок 6.13).

Пример радиального градиента на странице.

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

Анализ синтаксиса радиального градиента. Задав соответствующее свойство (background:), мы указываем, что нам требуется радиальный градиент (а не линейный). Затем мы указываем в скобках «начальную точку». В предыдущем примере мы использовали center, однако точно так же могли задействовать что-то вроде 25px 25px, чтобы радиальный градиент начинал расходиться в 25 пикселах от верха элемента с его левой стороны. Например:

Background: radial-gradient (25px 25px, ellipse cover, #ffffff 72%,

#dddddd 100%);

Эта строка кода дает следующий результат (рисунок 6.14).

Центр находится в 25 пикселах от верха элемента с его левой стороны, и от центра плавно расходится радиальный градиент

Следующее значение в нашем объявлении легче понять — это форма и размеры, которые должны быть у радиального градиента:

Background: radial-gradient (center, ellipse cover, #ffffff 72%,

#dddddd 100%);

Форму радиального градиента можно задать, выбрав один из двух вариантов: либо circle (радиальный градиент будет равномерно расходиться от центра во всех направлениях), либо ellipse (радиальный градиент будет неравномерно расходиться от центра в разных направлениях). При определении размеров радиального градиента можно проявлять немалую гибкость. Вы можете задать его размеры с помощью одного из следующих свойств:

closest-side — градиент будет расходиться от центра до ближайшей стороны блочного элемента (в случае с circle) либо до обеих сторон — вертикальной и горизонтальной, — которые являются ближайшими к центру (в случае с ellipse);

closest-corner — радиальный градиент будет расходиться от центра вплоть до ближайшего угла блочного элемента;

farthest-side — противоположность closest-side в том, что вместо того, чтобы расходиться до ближайшей стороны блочного элемента, радиальный градиент будет расходиться от центра до его наиболее удаленной стороны (либо до обеих наиболее удаленных от центра сторон — вертикальной и горизонтальной — в случае с ellipse);

farthest-corner — радиальный градиент будет расходиться от центра блочного элемента до его самого дальнего угла;

cover — значение идентично farthest-corner;

contain — идентично closest-side.

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

Например, мы можем изменить наше правило следующим образом:

Background: radial-gradient (20px 20px, circle cover,

Hsla (9,69%,85%,0.5) 0%, hsla (9,76%,63%,1) 50%, hsla (10,98%,46%,1) 51%, hsla (24,100%,50%,1) 75%, hsla (10,100%,39%,1) 100%);

Мы начинаем на расстоянии 20 пикселов от верха элемента с его левой стороны, используя значение circle в качестве формы радиального градиента и множественные «остановки цветов» HSL(A). Результат показан На рисунке 6.15.

Пример необычного радиального градиента.

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

ПРИМЕЧАНИЕ.

Прочесть спецификацию W3C радиальных фоновых градиентов можно по следующему адресу: http://dev. w3.org/csswg/css3-images/#radial-gradients.

Короткий путь к идеальным линейным и радиальным.

ГРАДИЕНТАМ CSS3.

Если создание CSS3-градиентов покажется вам тяжелой работой, то знайте, что существует несколько отличных онлайн-инструментов для генерирования градиентов. Я предпочитаю тот, что доступен по адресу http://www.colorzilla.com/gradient-editor/. Его интерфейс такой же, как у графических редакторов. Вы сможете выбирать требуемые цвета, «остановки», стиль градиента (поддерживаются линейные и радиальные градиенты) и даже цветовое пространство (HEX, RGB(A), HSL(A)) для вашего итогового градиента. Есть также множество заранее подготовленных градиентов, которые можно использовать в качестве отправной точки. Если этого вам покажется мало, то инструмент даже предоставит вам опциональный код, позволяющий сделать так, чтобы Internet Explorer 9 смог отобразить соответствующий градиент, а также поможет обеспечить сплошной цвет в качестве резервного варианта для устаревших браузеров. Мне все еще не удалось вас убедить? Как насчет возможности генерировать градиенты на основе имеющихся изображений? Думаю, она поспособствует тому, что вы решите воспользоваться этим инструментом.

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

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