Сегодня мы хотим продолжить рассказывать о CSS3, а именно – о градиентах. В предыдущих статьях мы рассказывали вам о различных параметрах в CSS3, позволяющих создавать незамысловатые фигуры или наносить эффекты. На этот раз давайте поговорим о двух типах градиентов – круговых и эллиптических.
Синтаксис градиентов
Градиенты в CSS3 объявляются при помощи параметра background-image. Это связано с намерением обеспечить лучшую совместимость, когда нам также, в одном правиле, нужно будет использовать background-color. Затем, для того чтобы создать радиальный градиент, мы просто вызываем его при помощи функции radial-gradient(). Есть 4 значения, которые нужно включить в функцию, чтобы градиент был создан правильно.
Второе значение определяет форму и размер градиента. Существует два аргумента формирования градиентов, первый отвечает за эллипс (который используется по умолчанию), и второй отвечает за круговые градиенты.
Что касается параметра размера градиента, то здесь мы можем использовать следующие 6 аргументов:
* closest-side – Форма градиента рассчитана по направлению к стороне блока, которая находится ближе всего к центру градиента (для круговых градиентов), либо по направлению к вертикальным и горизонтальным сторонам (для эллипсов).
* closest-corner - Форма градиента рассчитана по направлению к ближайшему углу блока от его центра.
* farthest-side – аргумент немного похож на closest-side, за исключением того, что форма градиента направлена к дальней стороне блока от центра градиента (либо вертикальные, либо горизонтальные).
* farthest-corner - Форма градиента направлена к дальнему углу блока от центра градиента.
* contain – то же самое, что и closest-side.
* cover – то же самое, что и farthest-corner.
Наконец, третий и четвертый параметры определяют комбинацию цветов. Итак, давайте посмотрим, каким образом мы пишем код для создания эллиптических градиентов, и на этот раз мы будем использовать значение cover в параметре gradient size, чтобы градиент распространялся очень широко, покрывая контейнер.
Body {
background-image: radial-gradient(center center, ellipse cover, #ffeda3, #ffc800);
}
Body {
background-image: radial-gradient(center center, circle cover, #ffeda3, #ffc800);
}
Как видно из названия, форма градиента будет образовывать круг.
Только учтите, что на данный момент практически все браузеры вряд ли смогут полностью поддерживать данный параметр, поэтому для многих браузеров понадобится прописывать префиксы. Итак, полный код, который будет работать во всех перечисленных браузерах будет выглядеть так (IE10+, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ и Opera 11+).
Body {
background-image: radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
background-image: -o-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
background-image: -ms-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
background-image: -moz-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
background-image: -webkit-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
}
Не забудьте посмотреть демо, и скачать исходный код.
a! Градиент является прекрасным инструментом манипуляции с цветом в CSS3 . Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.
Как говориться в классификации, градиенты в CSS3 являются изображениями. Для них нет специальных свойств. А для объявления используется свойство фонового изображения.
В общем случае синтаксис градиента (линейного) выглядит так:
1 | div {
|
Итак, давайте обо всем по порядку.
Прежде всего, линейный градиент объявлен функцией linear-gradient() . Функция имеет три основных значения. Первое значение определяет исходное положение. В примере указано top т.е. исходное положение сверху. Можно также использовать bottom , left и right ;
Если угол будет отрицательным то позиция смениться с нижнего левого угла на верхний левый.
Второе значение функции это начальный цвет и его стоп позиция, которая указана в процентах. Объявление данной позиции не обязательно, браузер по умолчанию присвоит первому цвету значение 0% .
Последним значением является второй цвет и его стоп позиция. По умолчанию принимает значение 100% . Эти крайние значения и они подразумевают, что первый цвет сразу начинает переходить во второй. Однако, если мы установим для первого цвета 50% , то он только с середины доступной высоты начнет переходить во второй. Вот так выглядит код:
Получаем одинаковые по высоте полоски. C четкой границей, перехода цвета не будет. Чтобы лучше понять как это работает поэкспериментируйте со значениями.
Радиальный градиент также как и линейный объявляется функцией, только уже radial-gradient() . Также есть и основные значения: это форма радиального градиента (circle — круг или ellipse — эллипс), начальный и конечный цвет. Синтаксис следующий:
div {
|
Если не указывать форму, то по-умолчанию будет установлен эллипс.
Также по-умолчанию установлена центральная позиция градиента, ее можно изменить. Позицию можно задать командами (top , bottom , left , right и center ), а также их комбинациями, либо указать в процентах или пикселях.
Комбинации команд:
Вот пример с процентами:
div {
|
Первое значение по оси Х второе по У .
Также радиальному градиенту можно задавать размер. Размер указывается через пробел после формы градиента. По-умолчанию применяется farthest-corner (к дальнему углу). Расчет ведется от центральной точки градиента до:
Чтобы, это лучше понять рассмотрим на примере. Градиент эллиптической формы с белым начальным и конечным синим цветом:
div {
|
Размер рассчитывается из расстояния до ближних сторон, очевидно что верхняя ближе по оси Y и левая по оси X .
А теперь до дальних сторон:
div {
|
Результат, как говорится на лицо. Размер исчисляется из расстояния до дальних сторон.
В радиальном как и в линейном градиенте для цвета могут быть применены стоп позиции. Хочется также заметить, если необходимо достигнуть прозрачности цветов то использовать следует rgba .
div {
|
Альфа канал, тот что последний и равен 0.2 указывает на то, что от 100% цвета используется только 20%.
В обоих видах CSS3 градиента можно использовать не два, а несколько цветов.
div {
|
Для обоих видов можно использовать повторение цветов. То есть, из данных значений образуется цикл. Функции повторяющегося градиента, repeating-linear-gradient() — для линейного и repeating-radial-gradient() — для радиального.
div {
|
0%
,
#FFAE00
100%
)
;
/* для Firefox */
background-image
:
-ms-linear-gradient(top
,
#FF5A00
0%
,
#FFAE00
100%
)
;
/* для IE 10+ */
background-image
:
-o-linear-gradient(top
,
#FF5A00
0%
,
#FFAE00
100%
)
;
/* для Opera */
background-image
:
linear-gradient(top
,
#FF5A00
0%
,
#FFAE00
100%
)
;
/* стандартный синтаксис */
}
div {
filter
:
progid:
DXImageTransform.Microsoft
.gradient(startColorstr=
#33FF5A00
,
endColorstr=
#33FFAE00
)
;
}
Где 33 сразу после решетки это процент насыщенности цвета.
Надеюсь, что статья оказалась для Вас полезной, а рассмотренная тема полностью раскрытой.
Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на
Обозначает радиальный (круговой) градиент. Применяется к , .
-moz-radial-gradient
([
|
Градиент - это комбинация двух и более заданных цветов, плавно переходящих друг в друга. В 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%);
Чтобы не искать по Интернету обрывки информации, лучше собрать все в одном месте. Сегодня поговорим о градиентах CSS3 — фишка нужная, часто используемая и, безусловно, полезная при разработке и верстке. Было желание сделать энциклопедическую статью, а как получилось — судить вам.
«Градиент - вид заливки в компьютерной графике, в которой необходимо задать цвет и прозрачность определённых (ключевых) точек, а цвет и прозрачность остальных точек рассчитываются относительно них по определённым математическим алгоритмам. Таким образом можно получать плавные переходы из одного цвета в другой, задав координаты и цвет начальной и конечной точек.» Википедия
Кстати, для тех, кто только начинает осваивать CSS — замечательная статья от Натальи Митрофановой — Как использовать CSS . Всем новичкам очень рекомендую
ознакомиться. Доступно, понятно — в общем, на отлично
Но вернемся к теме статьи. В 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 понимает, но в основном используются проценты и пикселы)
Четвертый — пять стопов цвета, измененное направление. Все достаточно просто.
На самом деле — гораздо интереснее с ним работать, чем с линейным градиентом. Но, к сожалению, его вписать в дизайн удается не всегда. Радиальный градиент — тот, который распространяется от точки в центре по окружности.
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 — одно из ключевых слов, которое может принять селектор размера. Я опишу каждое, чтобы было понятнее:
Несколько примеров для наглядности:
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); }
Из кода все видно, вы уже опытные градиентщики
На сегодня все. Статья и так получилась неприлично огромной. Спасибо всем, кто дочитал до этого места. Ретвиты и всякая социальщина только приветствуется. Удачного дня
