Кроссбраузерный градиент средствами css
В css3 есть свойство для создания градиента без использования графики. Как же сделать, чтобы он работал во всех браузерах?
Для этого пишем в стили
.class {
background: #f0e0ba;
background: -moz-linear-gradient(top, #f0e0ba, #d3a538);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d3a538),color-stop(1, #f0e0ba));
}
Теперь у нас работает градиент во всех современных браузерах
Чтобы заработало и в IE в файл стилей прописываем следующее
.class {
background: #f0e0ba;
background: -moz-linear-gradient(top, #f0e0ba, #d3a538); /* для FF */
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d3a538),color-stop(1, #f0e0ba)); /* для Safari и Chrome */
filter:progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0e0ba', endColorstr='#d3a538'); /* для IE 6-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0e0ba', endColorstr='#d3a538')"; /* для IE8 */
}
Все, теперь работает в FF, Chrome, Safari, IE 6-8. Но не работает в Opera, что является существенным минусом. Для оперы придется по старинке делать картинкой градиент
Пример использования свойства css3 gradient
test
Tweet
БлОг кРеАт�вНоГо КоТа
Блог Nubic’а
Форум о Shop-Script'е
Комментарии
Во-первых, в тестовом варианте у меня ничего не отображается (файрфокс 3.5.9).
Во-вторых, стоит ли создавать такой нечитаемый срач в таблицах стилей, не проще ли заменить бг картинкой? Я канеш, понимаю, трафик, но мы не в 90-х годах живем, у всех интернеты уже безлимитные и по 5 мегабит…
@Еремей:
1) пора бы обновить лису
2) речь не о сраче, а удобности. Намного легче потом будет поменять цвета,а не просить дизайнера отрисовывать новую графику
Для оперы есть решение – включение градиентного изображения посредством data:uri и его масштабирование до нужных размеров.
@Марик со Славянска:
можно и без data:uri. Я знаю, что опера поддерживает масштабирование фоновых изображений, но тут речь о создании градиента с помощью средств css
спасибо.как раз меняю фон своего блога
Здравствуйте. У меня возникла проблема с градиентом в IE, если задать ячейке градиент и прописать левый и правый бордеры то они (бордеры) почему то не отображаются, но если задавать бордеры непосредственно таблице (а не ячейке) то они отображаются. Может быть вы мне подскажете в чем проблема?)
покажите свой код
пробовали границу делать для самой таблицы, а градиент уже задавать ячейкам таблицы?
Именно, градиент задается только для ячейки. Если задавать бордер для всей таблицы то он отображается, но мне нужно только для ячейки с заданным градиентом
Для Opera уже тоже есть решение.
Смотрите тут: http://webkev.com/2011/09/01/krossbrauzernyj-gradient-na-css3/