В css 3 появилась возможность создания линейных и радиальных градиентов к сожалению Opera пока не поддерживает эту функцию. Тут можно посмотреть пример градиентов.
Для создания указанных выше градиентов в Firefox необходимо указать такие настройки:
background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
Рассмотрим указанный метод:
-moz-linear-gradient( [<point> || <angle>], <stop>, <stop> [, <stop>]* )
- [<point> || <angle>] — позиция начала градиента или угол. Позиция задаётся ключевыми словами left — right, top — bottom. Угол необходимо указывать в формате ARGdeg, где ARG — размер угла в градусах.
- <stop> — цвет градиента (можно задавать в формате rgb(), #rrggbb или ключевым словом). После указания цвета, до запятой можно указать длину градиентной полосы.
Для создания радиального градиента необходимо задать такие настройки:
background-image: -moz-radial-gradient(50% 50% 45deg, circle closest-corner, red, orange, yellow, green, blue, indigo, violet);
Рассмотрим подробнее:
-moz-radial-gradient( [<position> || <angle>], [<shape> || <size>], <stop>, <stop>[, <stop>]* )
- [<position> || <angle>] — позиция и угол градиента. Угол задаётся в том же формате, а позиция может быть задана как ключевыми словами (left, top..) или точкой в процентном формате. Верхний левый угол — 0% 0%, правый нижний 100% 100%.
- [<shape> || <size>] — задаёт форму градиента: circle или ellipse. size — размер градиента.
size может принимать такие значения:
closest-side (contain) — окружность имеет радиус равный расстоянию от цента до ближайшей граници полотна.
closest-corner — радиус равен расстоянию от центра до ближайшего угла.
farthest-side — радиус равен расстояния до дальней граници.
farthest-corner (cover) — до дальнего угла
Для создания аналогичных эффектов в Safari или Chrome пользуются такими методами:
-webkit-gradient(type, start_point, end_point, / stop…)
-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop…)
- type — тип градиента. Линейный — linear, радиальный — radial.
- start_point — точка начала линейного градиента. Задаётся комбинациями left top, right bottom, left bottom, right top.
- end_point — точка конца линейного градиента.
- stop — цвет градиента. Задаётся функцией color-stop(length, color). length — длина градиента заданная дробным числом.
- inner_center — центр первого кольца радиального градиента. Задаётся теми же ключевыми словами, что и start_point. center center — центр полотна.
- inner_radius — радиус первого кольца градиента. Задаётся числом пикселей.
- outer_center, outer_radius — центр и радиус последнего кольца градиента. Задаются аналогично.
Для создания тех же эффектов радуги я написал такой код:
background: -webkit-gradient(linear, left top, right bottom, from(red),color-stop(0.14, orange), color-stop(0.28, yellow), color-stop(0.42, green), color-stop(0.56, blue),color-stop(0.70, indigo), to(violet));
background: -webkit-gradient(radial, center center, 0, center center, 80, from(red),color-stop(0.14, orange), color-stop(0.28, yellow), color-stop(0.42, green), color-stop(0.56, blue),color-stop(0.70, indigo), to(violet));
Для реализации кросс-браузерности зададим цвет (для тех браузеров, которые не поддерживают градиенты), а остальные правила просто перечислим для каждого случая.
Вот так у меня получилось для линейного градиента:
background-color: #1a82f7;
background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background: -webkit-gradient(linear, left top, right bottom, from(red),color-stop(0.14, orange), color-stop(0.28, yellow), color-stop(0.42, green), color-stop(0.56, blue),color-stop(0.70, indigo), to(violet));
А вот так для радиального:
background-color: #1a82f7;
background-image: -moz-radial-gradient(50% 50%, circle closest-corner, red, orange, yellow, green, blue, indigo, violet);
background: -webkit-gradient(radial, center center, 0, center center, 80, from(red),color-stop(0.14, orange), color-stop(0.28, yellow), color-stop(0.42, green), color-stop(0.56, blue),color-stop(0.70, indigo), to(violet));
Надеюсь скоро и в опере чего нибудь придумают 😉
