Очередной блог фрилансера

коротко и полезно о веб-разработке

Menu Close

Изучаем CSS-градиенты за час

Вы отказываетесь использовать CSS-градиенты в своих проектах просто потому что не понимаете их, или же вас не устраивает текущая поддержка браузерами? Друзья мои, пришла пора избавиться от изображений, шириной в 1 пиксель. Если вам интересно узнать о том как использовать CSS-градиенты, эта статья для вас. Мы разберем основы синтаксиса, а затем перейдем к сложным эффектам с большим количеством советов и примеров. Изучение CSS-градиентов очень важно, поскольку их поддержка браузерами улучшается день ото дня, а мобильные браузеры изначально хорошо поддерживают CSS3.

Итак, давайте начнем.

Основной синтаксис

Первое о чем вам следует знать – это поддержка браузерами CSS-градиентов. К сожалению, на данный момент придется использовать вендорные префиксы и пользовательский фильтр для IE. Итого, мы имеем пять возможных префиксов, каждый из которых содержит свои характерные особенности, а также множественные различия между версиями браузеров: Opera (presto), Firefox (gecko), Safari / Chrome (Webkit), Konqueror (KHTML), и IE (Trident), содержащий два различных способа выполнения градиентов.

Для начала мы рассмотрим “стандартные” правила браузеров (не принимая во внимание старые правила from() to() ), а ближе к концу будет глава, посвященная IE-совместимости, поскольку его фильтры не оказывают влияния на основной код.

Основной синтаксис CSS-градиентов, выглядит следующим образом:

#wd {
background: vendor-type-gradient( start / position , shape size, color 1, color2 [position] [, other colors / positions] );

/*** реальный пример **/

background: -moz-linear-gradient( top left, red, #c10000, #ae0000 );
background: -webkit-linear-gradient( top left, red, #c10000, #ae0000 );
background: -o-linear-gradient( top left, red, #c10000, #ae0000 );
background: -khtml-linear-gradient( top left, red, #c10000, #ae0000 );
background: -ms-linear-gradient( top left, red, #c10000, #ae0000 );
background: linear-gradient( top left, red, #c10000, #ae0000 );
}

Приведенный код даст следующий результат:

Рассмотрим подробнее каждый из параметров:

  • Background: градиент указывается в качестве фона элемента через свойство background, точно так же, как  картинка или сплошной цвет.
  • vendor –:  указываем “-o” для оперы, “-moz” для Firefox, “-webkit” для safari и chrome, “-khtml” для Konqueror и “-ms” для IE.
  • type: здесь задается тип градиента, может содержать одно из двух значений “linear” или  “radial”.
  • start / position: это X/Y-координаты, которые либо задают браузеру направление градиента (в этом случае top – означает сверху вниз, а left – слева направо), либо указывают точные координаты начала градиента (например заданные координаты 600px 300px, инвертируют приведенный выше пример, поскольку точка начала градиента будет расположена в правом нижнем углу блока).
  • shape: при использовании радиального градиента можно указать “circle” для круглого градиента, или оставить свойство пустым, в этом случае градиент останется в форме эллипса.
  • size: определяет размер градиента. Давайте рассмотрим его подробнее.

Свойство size может принимать одно из шести значений: closest-sideclosest-corner, farthest-side, farthest-corner, contain и cover. Рассмотрим каждое из этих свойств на примере простого радиального градиента.

Closest-side

Края градиента подогнаны к ближайшей стороне контейнера.

Сlosest-corner

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

Farthest-side

Края градиента подогнаны к дальней стороне контейнера.

Farthest-corner

Края градиента подогнаны к дальнему углу контейнера, опять же градиент частично скрыт границами. Разница со значением farthest-side почти незаметна, но все же есть.

Contain

Градиент целиком размещается внутри контейнера, является аналогом свойства closest-side.

Cover

Градиент полностью покрывает область контейнера, аналог свойства farthest-corner.

Оставшиеся свойства градиента:

  • Color1: это первый цвет, цвет стартовой позиции, которую вы указали выше.
  • Colors 2, 3, 4…:  вы можете указать любое количество цветов по желанию, и они равномерно будут распределены в фоне элемента, если только вы не задали свойство position
  • Positon (для цветов): если вам не нравится равномерное распределение цветов, вы можете задать свои правила для их позиционирования.

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

#wd {
background: -moz-linear-gradient( top left, white, black 25% );
background: -webkit-linear-gradient( top left, white, black 25% );
background: -o-linear-gradient( top left, white, black 25% );
background: -khtml-linear-gradient( top left, white, black 25% );
background: -ms-linear-gradient( top left, white, black 25% );
background: linear-gradient( top left, white, black 25% );
}

На картинке вы можете видеть результат распределения черного и белого цвета, в соотношении 25% / 75%, диагональная линия является наглядным примером того, как браузер рассчитывает эти значения:

Множественные градиенты

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

Синтаксис очень простой, все что нужно сделать – разделить множественные объявления градиентов, запятыми. Обратите внимание, z-index для градиентов работает в обратном порядке, поэтому самый первый градиент будет сверху.

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

Например, следующий код


#wd {
background:
  -moz-linear-gradient( top left, white, transparent 25% ),
  -moz-linear-gradient( bottom right, white, transparent 25% ),
  -moz-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
  -moz-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
  black;

background:
  -webkit-linear-gradient( top left, white, transparent 25% ),
  -webkit-linear-gradient( bottom right, white, transparent 25% ),
  -webkit-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
  -webkit-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
  black;

background:
  -o-linear-gradient( top left, white, transparent 25% ),
  -o-linear-gradient( bottom right, white, transparent 25% ),
  -o-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
  -o-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
  black;

background:
  -khtml-linear-gradient( top left, white, transparent 25% ),
  -khtml-linear-gradient( bottom right, white, transparent 25% ),
  -khtml-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
  -khtml-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
  black;

background:
  -ms-linear-gradient( top left, white, transparent 25% ),
  -ms-linear-gradient( bottom right, white, transparent 25% ),
  -ms-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
  -ms-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
  black;

background:
  linear-gradient( top left, white, transparent 25% ),
  linear-gradient( bottom right, white, transparent 25% ),
  radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
  radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
  black; 
}

дает вот такой результат:

Эффекты градиентов

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

Мягкий световой эффект

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

Для создания тени используется следующий css, включающий правильное позиционирование элементов:

img {
margin: 0 -60px;
padding: 25px 60px 40px;
background: -moz-radial-gradient( center center, contain, black, white 90% );
background: -webkit-radial-gradient( center center, contain, black, white 90% );
background: -o-radial-gradient( center center, contain, black, white 90% );
background: -khtml-radial-gradient( center center, contain, black, white 90% );
background: -ms-radial-gradient( center center, contain, black, white 90% );
background: radial-gradient( center center, contain, black, white 90% );
}

Получится вот такой результат:

Фоновые CSS-паттерны

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

Вот пример того, как можно использовать простой фоновый паттерн, который легко можно интегрировать в свой сайт:

body {
background:
  -moz-radial-gradient( center center, contain, #757575, transparent ),
  black;

background:
  -webkit-radial-gradient( center center, contain, #757575, transparent ),
  black;

background:
  -o-radial-gradient( center center, contain, #757575, transparent ),
  black;

background:
  -khtml-radial-gradient( center center, contain, #757575, transparent ),
  black;

background:
  -ms-radial-gradient( center center, contain, #757575, transparent ),
  black;

background:
  radial-gradient( center center, contain, #757575, transparent ),
  black;

background-size: 100% 30px;
}

Получаем вот такой фон:

Свойство background-size контролирует высоту и ширину полосок, можно поэкспериментировать с разными значениями, и посмотреть какой получится результат.

CSS-рисование

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

С помощью следующего кода, мы нарисуем простое, испуганное лицо, которое можно отображать для пользователей IE:

#wd {
position: relative;
width: 450px;
height: 400px;
margin: 20px auto;
background:
  -moz-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
  -moz-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
  -moz-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
  -moz-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
  #f3c2bb;

background:
  -webkit-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
  -webkit-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
  -webkit-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
  -webkit-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
  #f3c2bb;

background:
  -o-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
  -o-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
  -o-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
  -o-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
  #f3c2bb;

background:
  -khtml-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
  -khtml-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
  -khtml-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
  -khtml-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
  #f3c2bb;

background:
  -ms-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
  -ms-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
  -ms-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
  -ms-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
  #f3c2bb;

background:
  radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
  radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
  radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
  radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
  #f3c2bb;

border-radius: 50%;
}

#wd:after {
content: "Are you using IE??";
position: absolute;
top: 225px;
left: 315px;
padding: 5px 10px;
width: 150px;
font-family: "comic Sans MS",arial,verdana; /* I just couldn't help using comics! */
background: white;
border: 2px solid #E19B92;
border-radius: 4px 4px 4px 4px;
}

Результат:

О совместимости

Осталось два важных замечания, относительно CSS-градиентов. Первое, синтаксис для старых webkit-браузеров, немного отличается от приведенных примеров:

#wd {
background-image: -webkit-gradient(type, position, radius, xpos ypos, outer radius, from(startColor), to(endColor) [, color-stop(25%, middleColor)] );

/* пример */
background-image: -webkit-gradient(radial, center center, 0, center center, 120, from(red), to(white), color-stop(10%, blue) );
}

Internet Explorer, начиная с версии 5.5 и  до версии 9, поддерживает градиенты через фильтр. Синтаксис следующий:

#wd{
   filter: progid:DXImageTransform.Microsoft.gradient(sProperties);
}

Возможные свойства фильтра (sProperties):

  • Enabled – свойство отвечает за отображение градиента, может принимать одно из двух значений: true или false.
  • StartColor – цвет начальной точки градиента, задается в десятичном формате, от 0 (полностью прозрачный) до  4294967295 (непрозрачный белый)
  • StartColorStr – цвет начальной точки градиента, задается в шестнадцатеричном формате #AARRGGBB, где AA – это шестнадцатеричное значение альфа-канала, с помощью которого задается нужная прозрачность. Значение 00 будет указывать на полную прозрачность, а FF – полную непрозрачность.
  • EndColor — цвет конечной точки градиента, задается в десятичном формате, от 0 (полностью прозрачный) до  4294967295 (непрозрачный белый)
  • EndColorStr — цвет конечной точки градиента, задается в шестнадцатеричном формате #AARRGGBB, где AA – это шестнадцатеричное значение альфа-канала, с помощью которого задается нужная прозрачность. Значение 00 будет указывать на полную прозрачность, а FF – полную непрозрачность.
  • GradientType – можно указать тип градиента, горизонтальный (значение 1) или вертикальный (значение 0). По умолчанию используется вертикальный градиент.

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

#wd{
   filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr=#FF27fb27, EndColorStr=#FF033d03, GradientType=0);
}

Результат

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

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

#wd{
   filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr=#FFc21269, EndColorStr=#32f4a5cc, GradientType=1);
}

Результат

Здесь первый цвет оставляем непрозрачным, а у второго вместо значения FF, указываем 32, то есть 50 в десятичной системе счисления. Таким образом, мы уменьшаем прозрачность второго цвета на 50%, ну и конечно тип градиента – единица.

Возможности фильтра весьма ограничены, но зато он точно будет работать в шестой, седьмой и восьмой версиях.

А вы используете CSS-градиенты в своих проектах, или считаете что для них еще не пришло время?

Перевод статьи Mastering CSS Gradients in Under an Hour, автор Rochester Oliveira

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо - поделиться ссылкой в социальных сетях: