Кроссбраузерный CSS-градиент

Очень часто в своих макетах дизайнеры используют всевозможные градиенты. Раньше приходилось вырезать 1-пиксельную картинку с градиентом и размножать ее (repeat). При этом на сервер уходил лишний запрос, что в свою очередь замедляло загрузку страницы.

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

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

[codesyntax lang=»css» title=»Линейный градиент»]

background: #ccc; /* for non-css3 browsers */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000'); /* для IE6-9 */
background: -webkit-linear-gradient(top, #fff, #000); /* для webkit-браузеров */
background: -moz-linear-gradient(top,  #fff,  #000); /* для firefox 3.6+ */ 
background: -o-linear-gradient(top,  #fff,  #000); /* для Opera 11.10+ */
background: -ms-linear-gradient(top,  #fff,  #000); /* для IE10+, т.к. лично я пока не проверял нужен ли префикс */
background: linear-gradient(to bottom,  #fff,  #000); /* W3C */

[/codesyntax]

Для linear-gradient без префикса как видно из примера нужно направление градиента обозначать to+[side-or-corner], где [side-or-corner] — сторона или угол в сторону которых будет направлена градиентная прямая. Так сказано в последней спецификации. Направление градиента (в предыдущем фрагменте кода top) можно также обозначать сочетанием направлений  (top left или to bottom right — без префиксов) причем порядок не важен, либо углом:

[codesyntax lang=»css» title=»CSS»]

background: linear-gradient(top left,  #fff,  #000);
background: linear-gradient(45deg,  #fff,  #000);
background: linear-gradient(-30deg,  #fff,  #000);

[/codesyntax]

Для точного позиционирования градиента нужно после указания его цвета указывать  его положение в пикселях или процентах. Например:

[codesyntax lang=»css» title=»Позиционирование градиента»]

background: linear-gradient(to top,  #fff 0,  #000 50%, red 100%);

[/codesyntax]

[codesyntax lang=»css» title=»Радиальный градиент»]

background: radial-gradient(circle farthest-side,#000,#FFF,#000);

[/codesyntax]

 

Запись опубликована в рубрике HTML/CSS с метками , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *