1 124 CSS градиенты — это еще один шаг навстречу во взаимодействии дизайна и программирования.
CSS градиенты сейчас поддерживаются следующими браузерами:
IE, firefox, safari, chrome, opera
и поэтому их смело можно реализовать в вашем сайте.
Давайте посмотрим на основы CSS градиентов: их синтаксис, поддержка браузеров и примеры.
Термины и понятия
Определение из Wiki:
Градиент — вид заливки в компьютерной графике, в которой необходимо задать цвет и прозрачность определённых (ключевых) точек, а цвет и прозрачность остальных точек рассчитываются относительно них по определённым математическим алгоритмам. Таким образом можно получать плавные переходы из одного цвета в другой, задав координаты и цвет начальной и конечной точек.
В CSS градиенты представлены в двух вариантах: linear (один последовательный градиент) и radial (круговой). Пока градиенты представлены, как графические элементы, их создание и редактирование было значительно упрощено для внедрения в CSS.
Давайте посмотрим на синтаксис.
Синтаксис линейного CSS градиента
Реализация линейного градиента различается для каждого браузера, но общий набор правил его построения такой:
|
1 |
background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) |
Первый аргумент является точкой, с которого начинается градиент или угол, при котором градиент должны быть отрисован. Следующие точки — это изменения цвета градиента.
Но всего требуется две точки (для начала и конца), остальные нужны для более точной отрисовки градиента. Требуемые точки могут включать в себя только цвет или цвет и процент или точку:
|
1 2 3 4 5 |
/* old: color-stop(percentage/amount,color) */ color-stop(0.20,red) /* current: color _ percentage/amount */ #dea222 20% |
В случае выхода нового CSS расширения, команда каждого браузера стремится сделать его поддержку. На пример, в WebKit есть несколько вариантов синтаксиса. Следующий сниппет охватывает всевозможные варианты реализации top-to-bottom линейного градиента:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#example1 { background-color:#063053; /* chrome 2+, safari 4+; multiple color stops */ background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.32,#063053),color-stop(0.66,#395873), color-stop(0.83,#5c7c99)); /* chrome 10+, safari 5.1+ */ background-image:-webkit-linear-gradient(#063053,#395873,#5c7c99); /* firefox; multiple color stops */ background-image:-moz-linear-gradient(top,#063053,#395873,#5c7c99); /* ie 6+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873'); /* ie8 + */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')"; /* ie10 */ background-image: -ms-linear-gradient(#063053,#395873,#5c7c99); /* opera 11.1 */ background-image: -o-linear-gradient(#063053,#395873,#5c7c99); /* The "standard" */ background-image: linear-gradient(#063053,#395873,#5c7c99); } |
Запомните, что основное свойство background-color должно быть первым, потому как оно является элементарным даунгрейдом(основным фоном) для тех браузеров, где поддержка CSS градиентов не реализована.
По спецификации CSS можно указывать угол градиента, вместо стандартного top-to-bottom.
Реализация градиента под углом следующая:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#example2 { background-color:#063053; /* chrome 2+, safari 4+; multiple color stops */ background-image:-webkit-gradient(linear,left bottom,right top,color-stop(0.32,#063053),color-stop(0.66,#395873), color-stop(0.83,#5c7c99)); /* chrome 10+, safari 5.1+ */ background-image:-webkit-linear-gradient(45deg,#063053,#395873,#5c7c99); /* firefox; multiple color stops */ background-image:-moz-linear-gradient(45deg,#063053,#395873,#5c7c99); /* ie10 */ background-image: -ms-linear-gradient(45deg,#063053 0%,#395873 100%); /* opera 11.1 */ background-image: -o-linear-gradient(45deg,#063053,#395873); /* The "standard" */ background-image: linear-gradient(45deg,#063053,#395873); } |
Как на счет цветных CSS градиентов?
Давайте попробуем создать радугу:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* пример 3 - линейная радуга */ #example3 { background-color:#063053; /* chrome 2+, safari 4+; multiple color stops */ background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.20,red),color-stop(0.40,green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange)); /* chrome 10+, safari 5.1+ */ background-image:-webkit-linear-gradient(red,green,blue,purple,orange); /* firefox; multiple color stops */ background-image:-moz-linear-gradient(top,red,green,blue,purple,orange); /* ie10 */ background-image: -ms-linear-gradient(red,green,blue,purple,orange); /* opera 11.1 */ background-image: -o-linear-gradient(red,green,blue,purple,orange); /* The "standard" */ background-image: linear-gradient(red,green,blue,purple,orange); } |
В Internet Explorer своя кухня:
|
1 2 3 4 5 6 7 8 |
<!--[if lt IE 10]> <style> .gradientElement { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')"; } </style> <![endif]--> |
Не идеально, но надежно!
Синтаксис кругового CSS градиента
Круговые градиенты отличаются от линейных тем, что они не распространяются в определенном направлении. Они начинаются в центральной точке и потом распространяются на все 360 градусов. Круговые градиенты в настоящее время не поддерживаются браузером Internet Explorer, кроме того, в тех браузерах, где реализация есть, различается синтаксис их создания.
Достаточно посмотреть на код:
|
1 2 3 4 |
/* basic */ background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red)); /* color stops */ background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20,red),color-stop(0.40,green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange)); |
А WebKit недавно предоставили новую версию синтаксиса CSS радиальных градиентов:
|
1 |
radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]*) |
Этот синтаксис работает в Firefox 4 и в браузерах на основе WebKit. Доступны следующие константы для радиальных градиентов: closest-side, closest-corner, farthest-side, farthest-corner, contain, cover.
Вот рабочий пример реализации круговых градиентов:
|
1 2 3 4 5 6 |
#example4 { background-image: -moz-radial-gradient(orange, red); background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red)); /* old */ background-image: -webkit-radial-gradient(orange, red); /* new syntax */ background-image: radial-gradient(orange, red); } |
Простой радужный градиент будет выглядеть следующим образом:
|
1 2 3 4 5 6 |
#example5 { background-image: -moz-radial-gradient(red,green,blue,purple,orange); background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20,red),color-stop(0.40,green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange)); /* old */ background-image: -webkit-radial-gradient(red,green,blue,purple,orange); /* new syntax */ background-image: radial-gradient(red,green,blue,purple,orange); } |
Код более детализированного градиента будет выглядеть так:
|
1 2 3 4 5 |
#example6 { background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%); background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange); background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%); } |
Отметим, что в примерах используемые цвета задаются с помощью hex и px единиц. Вы можете использовать свои меры исчисления.
CSS градиенты: Советы и Трюки
Вот несколько основных советов и трюков в реализации градиентов:
- Нужна прозрачность в пределах вашего градиента? Используйте
rgbaцвета. - Всегда используйте даунгрейд (резервный фон) при построении CSS градиентов, иначе ваши клиенты просто повесятся.
- И Firefox и браузеры на WebKit основе поддерживают префиксы
repeating-linear-gradientиrepeating-radial-gradient.Пример:
1234#example7 {background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);} - Если градиент просто необходим (в графиках, анимации и т.д.), то очень рекомендуется использовать библиотеку GFX на Dojo, которая является инструментом-шедевром в создании векторных изображений. GFX также поддерживает круговые градиенты в браузере Internet Explorer!
Резервные фоны CSS градиентов
Старые браузеры, такие как Internet Explorer 6&7, наряду с Opera и старыми версиями Firefox, не поддерживают CSS градиенты. Поэтому лучший обходной путь для таких случаев — задание регулярного свойства background с цветом на ваш выбор:
|
1 2 3 4 5 6 |
/* example 1 - basic */ #example1 { /* fallback */ background-color:#063053; /* gradients below */ } |
CSS градиенты — еще один шаг в эволюции CSS, в котором смешиваются основные стили программирования с основными принципами дизайна. И потому как CSS градиенты поддерживаются во всех современных браузерах, мы можем с полной уверенностью начинать их использовать в своих веб-приложениях.
Надеемся, что использование CSS градиентов станет немного доступнее для вас благодаря этой статье. А вот если вас интересует уборка офисов в Москве http://vselmi.ru/o-kompanii.html, то на сайте vselmi можно найти всю интересующую вас информацию.
