Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

CSS градиенты Категория: CSS
Название: CSS градиенты
Дата добавления: 08-08-2012
Раз просмотрено: 1242
Комментарии: 0
Рейтинг: * * * * * * * * * · (5 голосов)

CSS градиенты

Слово «градиент» имеет много различных значений, но в CSS, градиент строго определен, как постепенный переход между несколькими (как минимум двумя) цветами. CSS градиенты появились сравнительно недавно, но уже претерпели несколько изменений. Первоначально, они были предложены командой WebKit в апреле 2008 года, и появились путем модификации синтаксиса, предложенного для элемента <canvas> в HTML 5.

Позже, рабочая группа CSS в W3C предложила модифицированный синтаксис, который и был применен в CSS градиентах. Первый браузер, в котором были реализованы CSS градиенты, был Firefox 3.6, но и команда WebKit не была далеко позади, так что Safari 5.1 и все последние версии Chrome также поддерживают этот синтаксис.

Полная поддержка предоставляется также в Internet Explorer 10 Platform Preview (и, несомненно, будет в финальной версии). Opera 11.10 поддерживает линейные градиенты, о которых пойдет речь ниже.

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

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

Синтаксис линейных CSS градиентов

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

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

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

div {
	background: -webkit-linear-gradient(#FFF, #000);
	background: -moz-linear-gradient(#FFF, #000);
	background: -o-linear-gradient(#FFF, #000);
	background: -ms-linear-gradient(#FFF, #000);
	background: linear-gradient(#FFF, #000);
}

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

Двухцветный линейный CSS градиент
Двухцветный линейный CSS градиент

Обратите внимание, что этот градиент начинается в верхней части контейнера и движется вертикально вниз, за это отвечают специальные слова в синтаксисе. Направление, откуда начинается градиент определяется ключевым значением (top, bottom, left, right, center, так же, как и в свойстве background-position). Направление градиента требует два аргумента (left center, top right, и так далее), но если задан только один, то другой считается центром. Таким образом, аргумент left считается left center. Если никакого не задается, как в нашем первом примере, значением будет считаться top center, что является верхней частью контейнера.

Любой из этих способов аналогичен предыдущему примеру:

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

Альтернативным способом является использование в качестве аргумента угла. Углы могут быть объявлены с помощью нескольких единиц измерения: градусов, градов, радиан и поворотов. Но обычно используют градусы, так как их использование проще остальных. Угол определяет направление градиента: 0° (или 360°) направляет градиент слева направо, 45° — из нижнего левого угла в правый верхний, 90° направляет градиент снизу вверх, и так далее. Вы также можете использовать отрицательные значения, которые идут против часовой стрелки: -45° равносилен 315°. Для обозначения градусов в CSS используется слово deg.

Эти два способа задания CSS градиента также равносильны нашему первому примеру:

div {background: linear-gradient(270deg, #FFF, #000);}
div {background: linear-gradient(-90deg, #FFF, #000);}

Использование линейных CSS градиентов

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

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

Примеры различных CSS градиентов
Примеры различных CSS градиентов

Добавление дополнительных цветов

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

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

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

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

.ex1 {background: linear-gradient(left, #000, #FFF, #000);}
.ex2 {background: linear-gradient(bottom, #000, #FFF 20px, #000);}
.ex3 {background: linear-gradient(45deg, #000, #FFF, #000, #FFF, #000);}

Вы можете увидеть результат здесь:

CSS градиенты

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

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

Синтаксис радиальных CSS градиентов

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

Самый простой способ создать радиальный CSS градиент заключается в использовании этого синтаксиса:

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

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

Двухцветный радиальный CSS градиент
Двухцветный радиальный CSS градиент

Использование радиальных CSS градиентов

Вы можете создавать различные CSS градиенты при помощи нескольких дополнительных значений:

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

Обратите внимание на два новых ключевых слова здесь. Первое — это circle (круг), которое является значением формы, и делает градиент круглым, а не эллиптическим. Следующее значение contain (содержимое) — это значение размера. Это ключевое слово означает, что градиент закончиться у края контейнера, который ближе всего к центру градиента. Вы также можете использовать ключевое слово closest-side, если хотите, как эти слова являются синонимами.

Другие ключевые слова для размера градиента это: cover, которое останавливает градиент в самом дальнем углу элемента (вы также можете использовать его синоним farthest-corner), closest-corner, который останавливает градиент в самом ближнем углу, и farthest-side, которая останавливает градиент у самой дальней стороны.

Чтобы проиллюстрировать некоторые из этих ключевых слов для радиальных CSS градиентов, вы можете изучить эти примеры:

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

Вы можете увидеть результат здесь:

Примеры радиальных CSS градиентов
Примеры радиальных CSS градиентов

Первый пример показывает черно-белый градиент, который начинается в центре контейнера и идет до его самой дальней стороны. Во втором примере градиент начинается в верхнем правом углу окна и заканчивается в самом дальнем углу. И в последнем случае, градиент расположен в на 80% ширины и 50% высоты контейнера и простирается до ближайшей (правой) стороны.

Добавление дополнительных цветов

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

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

Вот демонстрация использования нескольких цветов в радиальных CSS градиентах:

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

А вот результаты этого CSS кода:

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

Несколько CSS градиентов

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

Вот два примера: первый использует линейный CSS градиент, а второй — радиальный:

.linears {
	background: linear-gradient(left top, #000, #FFF, transparent),
                linear-gradient(right top, #000, #FFF, transparent);
}

.radials {
	background: radial-gradient(20% 50%, circle contain, #FFF, #000 95%, transparent),
	            radial-gradient(50% 50%, circle contain, #FFF, #000 95%, transparent),
	            radial-gradient(80% 50%, circle contain, #FFF, #000 95%, transparent);
}

Оба этих примера показаны здесь:

Несколько CSS градиентов
Несколько CSS градиентов

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

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

Заключение

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

Это интересно: «Фиксированное меню быстрее в использовании».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

Ваш комментарий будет первым.