Начиная с версии 3.6 mozilla firefox стала поддерживать градиентную заливку. В этой статье я расскажу как сделать кроссбраузерный градиент.
Будет поддерживаться во всех основных браузерах
IE6+, Firefox 3.6 и выше, Safari, Chrome.
Для браузеров на webkit движке, это Safari, Chrome.
вот синтаксис:
1 | -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) |
- type – тип заливки есть два типа линейная и радиальная – radial и linear
- point – точка откуда и куда, два параметра через пробел, поддерживает числовые значения, проценты , так же положения лево право низ верх
- radius – устанавливается значение окружности только для радиальной заливки
- stop цвет – устанавливаются два значения: (либо процент или число между 0 и 1,0) и цвет
вот пара примеров, заходить только через safari или chrome
c web Китом закончили.
Для mozilla 3.6+
У мозиллы дела обстоят чуть по другому
1 | background: -moz-linear-gradient(top, blue, white); |
как мы видим тут тип градиента задается сразу в название функции и с параметрами для линейного градиента тут по проще
Задаем начало заливки, начальный цвет и конечный цвет.
можно залить под углом
1 | background: -moz-linear-gradient(left 20deg, black, white); |
Можно несколькими цветами
1 | background: -moz-linear-gradient(left, red, orange, yellow, green, blue); |
Синтаксис Радиальной заливки несколько другой
1 | -moz-radial-gradient([<bg -position> || <angle>,]? [<shape> || <size>,]? <color -stop>, </color><color -stop>[, </color><color -stop>]*); |
- bg-position – позиция
- angle – градус
- shape – формы заливки: circle, ellipse
- size – размер
все остальное работа с цветом
вот пара примеров
1 | background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white); |
1 | background: -moz-radial-gradient(contain, red, yellow, #1E90FF); |
если вы видите данные примеры значит вы сидите через мозиллу)
и на последок еще один интересный вариант заливки
1 | background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px); |
1 | background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px); |
Остался наш любимый IE
1 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); |
Здесь вообще нет параметров, заливаем сверху вниз двумя цветами и готово))
чтобы увидеть квадрат выше залитый градиентом посетите эту страницу с IE
Вот и все на этом статья закончена, затопите ваш сайт градиентами))
Загрузка ...
перечитал весь блог, довольно неплохо
спасибо огромное, очень нужная статья, только с ней ознакомилась – и сразу пригодилась )))
Привет! я тоже сделал свой блог но не как немогу на него найти мотериалы для продолжения и обновления темы. А я вам завидую))))
а опера ?
опера? тогда для нее решения не было))
opera-
background-image:-o-linear-gradient(#ff4500, #ff6600 15%, #ffffff 45%, #ff6600 85%, #ff4500);
у меня вот это работает
Опубликовано 22-05-2010
))) тогда не было
Спасибо за сайт – очеь много интересных мыслей почерпнул. И вопросы такие назрели, мне для всех браузеров нужно взять все коды и запихать их в ксс? не слишком ли тормознуто будет для ишака использовать фильтры? И чем лучше градиентной картинки в 1 пиксел растянутой по горизонтали?
совсем чуточку бы добавил. Можно по другому градиент прописать для всех браузеров кроме ie
background-image: -webkit-linear-gradient(top, #f0f0f0, #ccc);
меньше текста