• ×

    • Градиенты CSS3. Полное руководство

    15.06.2019

    Значение -moz-radial-gradient

    Обозначает радиальный (круговой) градиент. Применяется к , .

    Синтаксис

    -moz-radial-gradient ([ || ,]? [ || ,]? , [, ]*)

    Используемые значения

    Это позиция или точка отсчета для градиента, обозначающая тоже самое, что и в свойствах или . Если пропущено, то автоматически присваивается значение center . Задает угол, под которым распространяется градиент. По умолчанию принимает значение 0deg . Задает форму градиента. Она может быть в форме круга (circle ) или эллипса (ellipse ). По умолчанию принимает значение ellipse . Задает размер градиента:
    • closest-side - Ближайшая сторона. Градиент распространяется от центра по направлению к ближайшей стороне элемента (для circle ), или к обоим, горизонтальной и вертикальной сторонам (для ellipse ).
    • closest-corner - Ближайший угол. Размер градиента таков, что он распространяется от центра к ближайшему углу элемента.
    • farthest-side - Самая дальняя сторона. Градиент распространяется от центра по направлению к наиболее удаленной стороне элемента (для circle ), или к обоии, горизонтальной и вертикальной, сторонам (для ellipse ).
    • farthest-corner - Самый дальний угол. Размер градиента таков, что он распространяется от центра к самому дальнему углу элемента.
    • contain - Аналогично closest-side .
    • cover - Аналогично farthest-corner .
    Отвечает за отображение color-stops (мест смены цветов) в CSS градиентах по таким же правилам, как и в SVG градиентах. Может задаваться в процентах или мерах длины, например, пикселях.

    Замечания

    Градиент - это комбинация двух и более заданных цветов, плавно переходящих друг в друга. В CSS градиенты используют вместо каких-либо изображений, как индикатор загрузки, для улучшения восприятия web-страницы при масштабировании и т.д. Mozilla Firefox поддерживает два вида градиентов: линейный и радиальный.

    Mozilla Firefox корректно поддерживает градиенты только как значения для свойства , а заодно и . Вы можете задать значение для градиента вместо URL изображения.

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

    Background-image: -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);

    -moz-radial-gradient не поддерживает повторяющиеся градиенты. По умолчанию градиент растягивается, чтобы заполнить весь элемент, для которого он применяется. Посмотрите статью , чтобы узнать как сделать повторяющийся круговой градиент.

    Примеры

    В примерах показано как описываются радиальные градиенты с помощью -moz-radial-gradient

    Background: -moz-radial-gradient(45px 45px 45deg, circle cover, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);

    Результат выполнения примера:

    Background: -moz-radial-gradient(45px 45px, ellipse farthest-corner, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%); no-repeat;

    Результат выполнения примера:

    Background: -moz-radial-gradient(45px 45px, cover, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%);

    Радиальный градиент распространяется из центральной точки градиента во все стороны в форме круга или эллипса (форма по умолчанию), демонстрируя плавный переход от одного оттенка цвета к другому. Радиальный градиент создаётся с помощью функции radial-gradient(). Функция создаёт изображение, которое представляет собой радиальный градиент между указанными оттенками цветов. По умолчанию размер градиента соответствует размеру элемента, к которому он применён.

    Функция radial-gradient() принимает следующие, разделяемые запятой, аргументы:

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

    Простейший радиальный градиент требует только два аргумента, определяющие начальный и конечный цвет:

    Div { background-image: radial-gradient(cyan, indigo); width: 400px; height: 100px; } Попробовать »

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

    Div { width: 400px; height: 100px; margin: 10px; } #one { background-image: radial-gradient(cyan, yellow, indigo, white); } #two { background-image: radial-gradient(cyan, yellow 10%, indigo 30%, white 50%); } Попробовать »

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

    Div { width: 400px; height: 100px; margin: 10px; } #one { background-image: radial-gradient(ellipse, cyan, indigo); } #two { background-image: radial-gradient(circle, cyan, indigo); } Попробовать »

    По умолчанию браузер располагает центральную точку радиального градиента в центре элемента. Центр градиента можно позиционировать с помощью ключевого слова at, за которым располагаются ключевые слова (top, left, right, bottom, center) или значения в указанных единицах измерения CSS:

    Значение Описание
    left top
    left center
    left bottom
    right top
    right center
    right bottom
    center top
    center center
    center bottom     		Если вы указываете только одно ключевое слово, второе будет "center".
    x% y% Первое значение это горизонтальная позиция, второе значение вертикальная. Верхний левый угол это позиция 0% 0%. Правый нижний угол это позиция 100% 100%. Если вы указываете только одно значение, другое значение будет 50%.
    x-pos y-pos Первое значение это горизонтальная позиция, второе - вертикальная. Верхний левый угол это позиция 0 0. Единицы измерения могут быть пикселями (0px 0px) или любой другой CSS единицей измерения. Если вы указываете только одно значение, другое значение будет 50%. Вы можете сочетать % и единицы измерения.

    Позиционирование градиента указывается до значений цветовых оттенков, но после ключевого слова, определяющего форму градиента (если оно указано):

    Div { width: 400px; height: 100px; margin: 10px; } #one { background-image: radial-gradient(at right, cyan, indigo); } #two { background-image: radial-gradient(circle at 300px 50px, cyan, indigo, yellow); } #three { background-image: radial-gradient(circle at top left, cyan, indigo, yellow); } Попробовать »

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

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

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

    Div { width: 400px; height: 100px; margin: 10px; } #one { background-image: radial-gradient(circle closest-corner at 100px, cyan 50%, indigo); } #two { background-image: radial-gradient(circle closest-side, cyan, red, indigo); } #three { background-image: radial-gradient(100px circle at 200px, cyan 50%, indigo); } #four { background-image: radial-gradient(170px 50px ellipse at 175px, cyan, #90EE90, rgba(172,160,160,0)); }

    CSS3 видели и пробовали все, кого он мог заинтересовать. И закругленные уголки и падающие тени мы уже можем генерировать без лишнего труда.

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

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

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

    Linear-gradient

    На самом деле существует сразу несколько видов CSS3 градиентов. Это самый простой градиент.
    div {
    background-color: #444444;
    background-image: -webkit-gradient (linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4-5, Chrome 1-10, iOS 3.2-4.3, Android 2.1-3.0 */
    background-image: -webkit-linear-gradient (top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
    background-image: -moz-linear-gradient (top, #444444, #999999); /* Firefox 3.6+ */
    background-image: -ms-linear-gradient (top, #444444, #999999); /* IE 10+ */
    background-image: -o-linear-gradient (top, #444444, #999999); /* Opera 11.10+ */
    background-image: linear-gradient (to bottom, #444444, #999999);
    }

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

    У Safari до версии 5 и у Chrome до версии 10 был свой собственный синтаксис, да и IE 10 с Opera добавляют свои префиксы, увеличивая количество кода.

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

    Repeating-linear-gradient

    Позволяет повторять градиент, дает возможность создавать фоновые паттерны.

    Div {
    background-color: #444444;
    background-image: -webkit-repeating-linear-gradient (top, #444444 18%, #999999 25%); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
    background-image: -moz-repeating-linear-gradient (top, #444444 18%, #999999 25%); /* Firefox 3.6+ */
    background-image: -ms-repeating-linear-gradient (top, #444444 18%, #999999 25%); /* IE 10+ */
    background-image: -o-repeating-linear-gradient (top, #444444 18%, #999999 25%); /* Opera 11.10+ */
    background-image: repeating-linear-gradient (top, #444444 18%, #999999 25%);
    }

    Radial-gradient

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

    Div {
    background: #444444;
    background: -webkit-gradient (radial, center center, 0px, center center, 100%, color-stop(0%,#444444), color-stop(100%,#999999)); /* Chrome 1-10, Safari 4+, iOS 3.2-4.3, Android 2.1-3.0 */
    background: -webkit-radial-gradient (center, ellipse cover, #444444 0%,#999999 100%); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
    background: -moz-radial-gradient (center, ellipse cover, #444444 0%, #999999 100%); /* Firefox 3.6+ */
    background: -o-radial-gradient (center, ellipse cover, #444444 0%,#999999 100%); /* Opera 11.6+ */
    background: -ms-radial-gradient (center, ellipse cover, #444444 0%,#999999 100%); /* IE 10+ */
    background: radial-gradient (center, ellipse cover, #444444 0%,#999999 100%);
    }

    Opera не поддерживала круговой градиент до версии 11.6. В остальном ситуация такая же, как с линейным градиентом.
    Инструменты:
    1. gradients.glrzad.com выдает кроссбраузерный код, можно создавать множество цветовых переходов
    2. www.colorzilla.com/gradient-editor самый навороченный генератор. Можно создавать линейные и круговые градиенты, есть возможность выбора формата записи цветов, множество готовых градиентов.
    3. lea.verou.me/css3patterns галерея CSS3 паттернов. Можно посмотреть код каждого паттерна.

    Множественные фоны

    Это возможность назначать сразу несколько фоновых изображений одному элементу.
    div {
    background: url(fallback.png) no-repeat 0 0;
    background: url(foreground.png) no-repeat 0 0, url(middle-ground.png) no-repeat 0 0, url(background.png) no-repeat 0 0 ; /* Firefox 3.6+, Safari 1.3+, Chrome 2+, IE 9+, Opera 10.5+, iOS 3.2+, Android 2.1+ */
    }
    Не стоит забывать о браузерах, не поддерживающих множественные фоны.

    Порядок фонов такой: от верхнего к нижнему, то есть самый нижний фон нужно прописывать в конце. Вместо фоновых картинок можно прописывать и CSS3 градиенты.

    Border-radius

    Закругленные уголки у блока. Все просто, если нужен одинаковый радиус закругления.

    Div {
    -webkit-border-radius : 12px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
    -moz-border-radius : 12px; /* Firefox 1-3.6 */
    border-radius : 12px; /* Opera 10.5+, IE 9+, Safari 5, Chrome , Firefox 4+, iOS 4+, Android 2.1+ */
    }

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

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

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

    div {
    -moz-border-radius : 15px 30px 45px 60px;
    -webkit-border-radius : 15px 30px 45px 60px;
    border-radius : 15px 30px 45px 60px;
    }


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

    Div {
    border-top-left-radius : 5px 30px;
    border-top-right-radius : 30px 60px;
    border-bottom-left-radius : 80px 40px;
    border-bottom-right-radius : 40px 100px;
    }



    Если все одинковы:

    Div {
    border-radius : 8px / 13px;
    }


    Инструменты:

    Upd Для желающих автоматизировать процесс создания префиксов написана .

    Рис. 1. Радиальный и линейный градиент

    Радиальный градиент создаётся с помощью свойства background или background-image .

    Синтаксис

    Background-image: radial-gradient([ circle || <радиус> ] [ at <позиция> ]? , | [ ellipse || [<радиус> | <проценты> ]{2}] [ at <позиция> ]? , | [ [ circle | ellipse ] || <размер> ] [ at <позиция> ]? , | at <позиция> , <цвет> [ , <цвет> ]*)

    Обозначения

    Описание Пример
    <тип> Указывает тип значения. <размер>
    A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
    A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
    A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
    Группирует значения. [ crop || cross ]
    * Повторять ноль или больше раз. [,<время>]*
    + Повторять один или больше раз. <число>+
    ? Указанный тип, слово или группа не является обязательным. inset?
    {A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
    # Повторять один или больше раз через запятую. <время>#
    ×

    Значения

    circle Радиальный градиент круглой формы. ellipse Создаёт градиент эллиптической формы. Эта форма установлена по умолчанию. <радиус> Радиус градиента в доступных для CSS единицах. Одно значение указывает радиус круга, два значения - радиус эллипса по оси x и его же радиус по оси y. Если радиус явно не указан, градиент будет заполнять собой весь фон элемента. <позиция>

    Задаёт начальную точку откуда исходит градиент. Позиция точки пишется аналогично значениям свойства background-position с помощью ключевых слов или доступных единиц измерения вроде пикселей или процентов; ниже приведены возможные сочетания.

    • top left = left top = 0% 0% (в левом верхнем углу);
    • top = top center = center top = 50% 0% (по центру вверху);
    • right top = top right = 100% 0% (в правом верхнем углу);
    • left = left center = center left = 0% 50% (по левому краю и по центру);
    • center = center center = 50% 50% (по центру) - это значение по умолчанию;
    • right = right center = center right = 100% 50% (по правому краю и по центру);
    • bottom left = left bottom = 0% 100% (в левом нижнем углу);
    • bottom = bottom center = center bottom = 50% 100% (по центру внизу);
    • bottom right = right bottom = 100% 100% (в правом нижнем углу).
    <цвет> Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах. <размер> Устанавливает размер градиента. В табл. 1 перечислены возможные значения размера с их описанием и результатом для белого и чёрного цвета. Код и вид дан для кругового и эллиптического градиента. Табл. 1. Ключевые слова для изменения размера градиента
    Значение Код Описание Вид
    closest-side

    background: radial-gradient(circle closest-side at 30px 20px, #fff, #000);

    background: radial-gradient(closest-side at 30px 20px, #fff, #000);

    		Градиент совпадает с ближайшей к нему стороной блока (для круга) или одновременно совпадает с ближайшими горизонтальными и вертикальными сторонами (для эллипса).

    background: radial-gradient(circle closest-corner at 30px 20px , #fff, #000);

    background: radial-gradient(closest-corner at 30px 20px , #fff, #000);

    		Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока.

    background: radial-gradient(circle farthest-side at 30px 20px , #fff, #000);

    background: radial-gradient(farthest-side at 30px 20px , #fff, #000);

    		Похож по своему действию на closest-side , но градиент распространяется до дальней стороны блока.
    farthest-corner

    background: radial-gradient(circle farthest-corner at 30px 20px , #fff, #000);

    background: radial-gradient(farthest-corner at 30px 20px , #fff, #000);

    		Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока,

    Пример

    Градиент

    Градиент

    Этот элемент помогает в случае, когда вы находитесь в осознании того факта, что совершенно не понимаете, кто и как вам может помочь. Именно в этот момент мы и подсказываем, что помочь вам никто не сможет.

    Результат данного примера показан ниже.

    Примечание

    Chrome до версии 26, Safari до версии 6.1 и Android до версии 4.4 поддерживают -webkit-radial-gradient() .

    Opera до версии 12.10 поддерживает -o-radial-gradient() .

    Firefox до версии 16 поддерживает -moz-radial-gradient() .

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

    Спецификация

    Каждая спецификация проходит несколько стадий одобрения.

    • Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
    • Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
    • Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
    • Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
    • Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
    • Draft (Черновик спецификации ) - первая черновая версия стандарта.
    ×

    Браузеры

    В таблице браузеров применяются следующие обозначения.

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

    Число указывает версию браузера, начиная с которой свойство поддерживается.

    ×

    Чтобы не искать по Интернету обрывки информации, лучше собрать все в одном месте. Сегодня поговорим о градиентах CSS3 — фишка нужная, часто используемая и, безусловно, полезная при разработке и верстке. Было желание сделать энциклопедическую статью, а как получилось — судить вам.

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

    Кстати, для тех, кто только начинает осваивать CSS — замечательная статья от Натальи Митрофановой — Как использовать CSS . Всем новичкам очень рекомендую ознакомиться. Доступно, понятно — в общем, на отлично
    Но вернемся к теме статьи. В CSS3 градиенты бывают двух видов — линейные и радиальные. Рассмотрим каждый вид подробнее, чтобы понять специфику их использования.

    Линейный градиент CSS3

    Линейный градиент это такой, в котором цвет переходит один в другой пропорционально между двумя точками по прямой линии. Проще всего — на примере:

    Div {/*-префикс-linear-gradient(стартовый цвет,финишный цвет);*/ background: -moz-linear-gradient(#FFF, #000); background: -ms-linear-gradient(#FFF, #000); background: -o-linear-gradient(#FFF, #000); background: -webkit-linear-gradient(#FFF, #000); }

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

    Пойдем дальше и рассмотрим более сложный пример — изменим направление градиента. Направление в синтаксисе носит название point и требует двух значений — откуда и куда. Всего есть пять значений: top , bottom , left , right и center. Соответственно, в написании направления нужно использовать два значения. Первым идет «откуда», вторым — «куда». Но есть небольшая тонкость — если указано только одно расположение — второе по умолчанию будет center . Учитывайте это в своих проектах.

    В примере выше не указано направление градиента, поэтому по умолчанию выбирается направление top center.

    Div { background: linear-gradient(center top, #FFF, #000); } div { background: linear-gradient(top, #FFF, #000); }

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

    Как альтернатива направлению, а скорее, как дополнение — в записи можно использовать углы, значение которых может задаваться в нескольких величинах, среди которых градусы, радианы и прочие геометрические штуки. Но для простоты — лучше использовать градусы, так будет понятно для всех. Градуировка расположена по часовой стрелке — 0 или 360 это верх, 90 — право, 180 — низ и 270 — лево. Допустима запись со знаком минус — в таком случае градуировка идет против часовой стрелки.

    Рассмотрим несколько примеров, для понимания процесса:

    Ex1 { background: linear-gradient(left, #FFF, #000); } ex2 { background: linear-gradient(right, #FFF, #000); } ex3 { background: linear-gradient(225deg, #FFF, #000); }

    Первый вариант — слева направо, второй — справа налево, третий — 225градусов. Градусы позволяют более точно направить градиент, чего нельзя добиться с помощью слов.

    Следующий интересный момент при работе с градиентами —

    Добавление стоп-цвета

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

    Div {background: linear-gradient(left,#000,#FFF,#000);}

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

    Ex1 {background: linear-gradient(left,#000,#FFF,#000);} ex2 {background: linear-gradient(left,#000,#FFF 75%,#000);} ex3 {background: linear-gradient(bottom,#000,#FFF 20px,#000);} ex4 {background: linear-gradient(45deg,#000,#FFF,#000,#FFF,#000);}

    Результат на картинке:

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

    Второй пример — тоже самое, только указывается, в каком месте будет находится стоп-цвет. В данном случае — 75% от начала. Синтаксис прост — на примере видно. После значения цвета указываем позицию в процентах. Никаких запятых ставить не нужно.

    Третий пример — показывает, что значение позиции стоп-цвета можно указывать не только в процентах, но и в пикселах (а также во всех других единицах, которые CSS понимает, но в основном используются проценты и пикселы)

    Четвертый — пять стопов цвета, измененное направление. Все достаточно просто.

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

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

    E { background: radial-gradient(позиция или угол, форма или размер, от-стоп, стоп-цвет, до-стоп); }

    Синтаксис практически тот же, с одним отличием — добавилась форма и размер. Форма бывает двух видов — эллипс и круг (ellipse и circle, соответственно, по умолчанию значение:эллипс) Значение размера может принимать одно из шести значений. О них чуть ниже.

    Простейший синтаксис выглядит так:

    Div {background: radial-gradient(#FFF,#000);}

    Радиальные градиенты нужно указывать с вендорным префиксом браузера:

    Div { background: -moz-radial-gradient(#FFF, #000); background: -ms-radial-gradient(#FFF, #000); background: -webkit-radial-gradient(#FFF, #000); }

    Результат выполнения кода — на картинке:

    Рассмотрим код посложнее:

    Div { background: radial-gradient(contain circle, #FFF, #000); }

    Обратите внимание, в примере два селектора, о которых говорилось выше — форма и размер(положение). Размером значение селектора назвать сложно, скорее это расположение. Но в официальной документации этот селектор обозначен как size, поэтому будем называть его размером. Circle — как раз означает, что градиент будет круглым, а не эллиптическим. Contain — одно из ключевых слов, которое может принять селектор размера. Я опишу каждое, чтобы было понятнее:

    • closest-side — Ближайшая сторона. Градиент распространяется от центра по направлению к ближайшей стороне элемента (для circle ), или к обоим, горизонтальной и вертикальной сторонам (для ellipse ).
    • closest-corner — Ближайший угол. Размер градиента таков, что он распространяется от центра к ближайшему углу элемента.
    • farthest-side — Самая дальняя сторона. Градиент распространяется от центра по направлению к наиболее удаленной стороне элемента (для circle ), или к обоим, горизонтальной и вертикальной, сторонам (для ellipse ).
    • farthest-corner — Самый дальний угол. Размер градиента таков, что он распространяется от центра к самому дальнему углу элемента.
    • contain — Аналогично closest-side .
    • cover — Аналогично farthest-corner .

    Несколько примеров для наглядности:

    Ex1 { background: radial-gradient(circle farthest-side, #000, #FFF); } ex2 { background: radial-gradient(left,circle farthest-side,#000,#FFF); } ex3 { background: radial-gradient(right top,circle cover,#FFF,#000); } ex4 { background: radial-gradient(80% 50%,circle closest-side,#FFF,#000); }

    Результат выполнения каждого кода:

    Первый пример — круглый градиент, который распространяется к дальней стороне (используется farthest-side )

    Второй — центр находится слева, градиент распространен к дальней стороне.

    Третий — центр справа сверху, градиент к дальнему углу.

    Четвертый — центр расположен в точке, 50% по ширине, 80% по высоте и круглый градиент к ближайшей стороне.

    Добавление стоп-цвета

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

    Ex1 { background: radial-gradient(circle farthest-side,#000,#FFF,#000); } ex2 { background: radial-gradient(circle farthest-side,#000,#FFF 25%,#000); } ex3 { background: radial-gradient(left,circle farthest-side,#FFF,#000 25%,#FFF 75%,#000); } ex4 { background: radial-gradient(40% 50%,circle closest-side,#FFF,#FFF 25%,#000 50%,#FFF 75%,#000); }

    Из кода все видно, вы уже опытные градиентщики

    На сегодня все. Статья и так получилась неприлично огромной. Спасибо всем, кто дочитал до этого места. Ретвиты и всякая социальщина только приветствуется. Удачного дня

    Похожие статьи
     
    Категории
    Видеоматериалы
    Популярное
    Новое