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

Опубликовано: 23.10.2011

Влад Мержевич

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

Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image или универсальное свойство background. Среди браузеров нет единой поддержки градиентов, так что для каждого придётся добавить отдельную строку, как показано в примере 1.

Пример 1. Градиент

HTML5CSS3IE 9IE 10Cr 13Op 11Sa 5Fx 7

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   .gradient {
    background: #fefcea; /* Для старых браузров */
    background: -moz-linear-gradient(top, #fefcea, #f1da36); /* Firefox 3.6+ */
    /* Chrome 1-9, Safari 4-5 */
    background: -webkit-gradient(linear, left top, left bottom, 
                color-stop(0%,#fefcea), color-stop(100%,#f1da36));
    /* Chrome 10+, Safari 5.1+ */
    background: -webkit-linear-gradient(top, #fefcea, #f1da36);
    background: -o-linear-gradient(top, #fefcea, #f1da36); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fefcea, #f1da36); /* IE10 */
    background: linear-gradient(top, #fefcea, #f1da36); /* CSS3 */ 
    padding: 10px;
    border: 1px solid #333;
   }
  </style>
 </head>
 <body>
  <p class="gradient">Здесь обсценная идиома традиционно начинает прозаический образ, 
  но языковая игра не приводит к активно-диалогическому пониманию.</p> 
 </body>
</html>

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

Линейный градиент для абзаца

Рис. 1. Линейный градиент для абзаца

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

Синтаксис linear-gradient

Для записи позиции применяются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать left top или top left. В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #000 и #fff, по другому от чёрного к белому.

Табл. 1. Типы градиента
Позиция	Угол	Описание
top	270deg	Сверху вниз.
left	0deg	Слева направо.
bottom	90deg	Снизу вверх.
right	180deg	Справа налево.
top left	-45deg	От левого верхнего угла к правому нижнему.
top right	225deg	От правого верхнего угла к левому нижнему.
bottom left	45deg	От левого нижнего угла к правому верхнему.
bottom right	-225deg	От правого нижнего угла к левому верхнему.

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

Синтаксис linear-gradient

Нулю градусов (или 360º) соответствует горизонтальный градиент слева направо, далее отсчёт ведётся против часовой стрелки.

Старые версии Chrome и Safari имеют другой синтаксис. Вначале пишется тип градиента (linear), затем указывается начальная точка, от которой идёт градиент и конечная точка, куда он направляется. После чего добавляются цвета градиента.

Синтаксис linear-gradient

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

Пример 2. Полупрозрачные цвета

HTML5CSS3IE 9IE 10Cr 13Op 11Sa 5.1Fx 7

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   body { background: url(images/celtic1.png); }
   div {
    background-image: -moz-linear-gradient(top, rgba(30,87,153,0), rgba(30,87,153,0.8), 
                      rgba(30,87,153,1), rgba(30,87,153,1), rgba(41,137,216,1), rgba(30,87,153,1), 
                      rgba(30,87,153,1), rgba(30,87,153,0.8), rgba(30,87,153,0));
    background-image: -webkit-linear-gradient(top, rgba(30,87,153,0),rgba(30,87,153,0.8),
                      rgba(30,87,153,1), rgba(30,87,153,1), rgba(41,137,216,1), rgba(30,87,153,1),
                      rgba(30,87,153,1), rgba(30,87,153,0.8), rgba(30,87,153,0));
    background-image: -o-linear-gradient(top, rgba(30,87,153,0), rgba(30,87,153,0.8),
                      rgba(30,87,153,1), rgba(30,87,153,1), rgba(41,137,216,1), rgba(30,87,153,1),
                      rgba(30,87,153,1), rgba(30,87,153,0.8),rgba(30,87,153,0));
    background-image: -ms-linear-gradient(top, rgba(30,87,153,0), rgba(30,87,153,0.8),
                      rgba(30,87,153,1), rgba(30,87,153,1), rgba(41,137,216,1), rgba(30,87,153,1),
                      rgba(30,87,153,1), rgba(30,87,153,0.8), rgba(30,87,153,0));
    background-image: linear-gradient(top, rgba(30,87,153,0), rgba(30,87,153,0.8), rgba(30,87,153,1),
                      rgba(30,87,153,1), rgba(41,137,216,1), rgba(30,87,153,1), rgba(30,87,153,1),
                      rgba(30,87,153,0.8),rgba(30,87,153,0));
    color: #fff; padding: 10px;
   }
  </style>
 </head>
 <body>
  <div>Генезис свободного стиха, несмотря на внешние воздействия, 
       отталкивает словесный метаязык.</div>
 </body>
</html>

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

Рис. 2. Градиент с полупрозрачными цветами

Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию. В примере 3 показано создание градиентной кнопки, в которой положение второго цвета из трёх задано как 36%.

Пример 3. Градиентная кнопка

HTML5CSS3IE 9IE 10Cr 13Op 11Sa 5Fx 7

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
  <style>
   button {
    background: #b5bdc8;
    background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), 
                color-stop(36%,#828c95), color-stop(100%,#28343b));
    background: -webkit-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%);
    background: -o-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%);
    background: -ms-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%);
    background: linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%);
    font-size: 16px; /* Размер шрифта */
    padding: 10px 20px; /* Поля вокруг текста */
    color: #fff; /* Цвет текста */
    border: 1px solid #333; /* Параметры рамки */
    border-radius: 20px; /* Радиус скругления */
   }
  </style>
 </head>
 <body>
   <button>Нажми меня нежно</button>
 </body>
</html>

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

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

Рис. 3. Градиентная кнопка

За счёт задания положения цвета можно получить резкие переходы между цветами, что в итоге даёт набор однотонных полосок. Так, для двух цветов надо указать четыре цвета, первые два цвета одинаковы и начинаются от 0% до 50%, оставшиеся цвета также одинаковы меж собой и продолжаются от 50% до 100%. В примере 4 полоски добавляются в качестве фона веб-страницы. Из-за того, что крайние значения подставляются автоматически их можно не указывать, так что достаточно написать всего-лишь два цвета.

Пример 4. Однотонные полоски

HTML5CSS3IE 9IE 10Cr 13Op 11Sa 5.1Fx 7

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Горизонтальные полоски</title>
  <style>
   body {
    background-color: #f0f0f0; /* Цвет фона */
    background-image: -moz-linear-gradient(transparent 50%, #a3e5a3 50%);
    background-image: -o-linear-gradient(transparent 50%, #a3e5a3 50%);
    background-image: -webkit-linear-gradient(transparent 50%, #a3e5a3 50%);
    background-image: -ms-linear-gradient(transparent 50%, #a3e5a3 50%);
   }
  </style>
 </head>
 <body>
  <p>Типичная европейская буржуазность и добропорядочность 
  изящно иллюстрирует официальный язык.</p>
 </body>
</html>

Результат данного примера показан на рис. 4. Обратите внимание, что один из цветов градиента задан прозрачным, поэтому он меняется косвенно через цвет фона веб-страницы.

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

Рис. 4. Фон из горизонтальных полосок

Градиенты достаточно популярны среди веб-дизайнеров, но их добавление усложняется разными свойствами под каждый браузер и указанием множества цветов. Чтобы вам было проще создавать градиенты и вставлять их в код, рекомендую сайт www.colorzilla.com/gradient-editor с помощью которого легко настроить градиенты и сразу получить нужный код. Имеются готовые шаблоны (Presets), просмотр результата (Preview), настройка цветов (Adjustments), конечный код (CSS), который поддерживает IE через фильтры. Для тех, кто работал в Фотошопе или другом графическом редакторе, создание градиентов покажется плёвым делом, остальным не составит труда быстро разобраться. В общем, всячески рекомендую.

градиент