CSS3 поддержка градиента для всех браузеров
Продолжаем продвигать CSS3 в массы, теперь помимо использования border-radius и box-shadow, уже можно использовать заливку градиентом без применения внешних изображений. О том, как это сделать, любезно делится с нами Robert Nyman.
Теперь мы имеем возможность создавать градиентные заливки прямо из CSS кода, без использования каких-либо картинок.Различия синтаксиса и поддержка браузерами
Хорошие новости заключаются в том, что в списке браузеров, поддерживающих CSS градиенты, состоят Firefox, Safari, Google Chrome и Internet Explorer ("правильная" Opera опять, как было сказано в предыдущей статье, уже на подходе). Плохая новость, - реализация этой самой возможности для каждого браузера своя. В случае с IE используется древний подход берущий свое начало еще с IE 5.5. Для браузеров базирующихся на WebKit (Safari и Google Chrome), которые первыми ввели поддержку градиентов и использовали для этого canvas, рабочая группа CSS ввела другие диалекты, синтаксис которых реализовался в Firefox (и я полагаю далее он уже войдет и в поддержку WebKit-овских браузеров). Итак, мы имеем поддержку CSS градиентов для:- Firefox 3.6
- Safari 4
- Google Chrome
- Internet Explorer 5.5
Примеры
Давайте посмотрим на пример кода:Линейный градиент, сверху вниз
<style>
#gradient {
color: #fff;
height: 100px;
padding: 10px;
/* Для WebKit (Safari, Google Chrome и т.д.) */
background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
/* Для Mozilla/Gecko (Firefox и т.д.) */
background: -moz-linear-gradient(top, #00f, #fff);
/* Для Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
/* Для Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
}
</style>
Я, - градиент сверху вниз, а не картинка!
Вот, результат:
Я, - градиент сверху вниз, а не картинка!
Линейный градиент, слева направо
Этот градиент перетекает слева направо, по 70% ширине элемента. Конечный цвет, после 70% не будет корректно работать в Internet Explorer; опции FinishX и GradientSize не применяются в фильтре градиента ...<style>
#gradient-with-stop {
color: #fff;
height: 100px;
padding: 10px;
/* Для WebKit (Safari, Google Chrome и т.д.) */
background: -webkit-gradient(linear, left top, right top, from(#00f), to(#fff), color-stop(0.7, #fff));
/* Для Mozilla/Gecko (Firefox и т.д.) */
background: -moz-linear-gradient(left top, #00f, #fff 70%);
/* Для Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF, GradientType=1);
/* Для Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF, GradientType=1)";
}
</style>
Я, - градиент слева направо, а не картинка!
Вот, результат:
Я, - градиент слева направо, а не картинка!
Радиальный градиент
Можно позабавиться и сделать радиальный градиент! Но, к сожалению, этот тип градиентов никак не поддерживается в Internet Explorer.<style>
#gradient-radial {
color: #fff;
width: 100px;
height: 100px;
padding: 10px;
/* Для WebKit (Safari, Google Chrome и т.д.) */
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(#ffffa2), to(#00f));
/* Для Mozilla/Gecko (Firefox и т.д.) */
background: -moz-radial-gradient(40% 40%, farthest-side, #ffffa2, #00f);
/* Для Internet Explorer */
/* Если бы :( ... */
}
</style>
Я радиальный градиент!
Вот, результат:
Я радиальный градиент!
Итоги
Для простых линейных градиентов, это решение вполне подходит, что-бы пользоваться им просто из CSS. К сожалению ограниченность возможностей Internet Explorer'а не позволяет наслаждаться всеми типами градиентов в полной мере.
Обязательные поля помечены *
Что то не одного результата не видно :(
Возможно у Вас Опера, тогда придется подождать (внимательно посмотрите начало статьи)
/* Для WebKit (Safari, Google Chrome и т.д.) */
background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
/* Для Mozilla/Gecko (Firefox и т.д.) */
background: -moz-linear-gradient(top, #00f, #fff);
/* Для Internet Explorer 8 */
-ms-filter: «progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)»;
/* Для Opera */
background: -o-linear-gradient(top, #00f, #fff);
Не пойму в чём дело, но у меня тока 2 картинки загрузилось. ((( А ваще понравились! :)
У меня FF 3.6 результатов не видно! Загрузите картинками, мы полюбуемся =) спасибо за материал…
Интересно, а логи моего блога говорят что у Вас:
«Mozilla/5.0 (Windows; U; Windows NT 6.1; ru; rv:1.9.1.6) Gecko
/20091201 MRA 5.6 (build 03270) Firefox/3.5.6»
Прежде чем писАть статью я всегда проверяю то, что в ней заявлено.
У меня тоже — FF 3.6 — эффекта также нет…Надо будет еще раз попробовать — может что-то не так делаю…
Интересно, а можно с CSS3 сделать 3х цветный градиент под углом? как здесь http://emfire.ru/
Если кто знает, жду в почту, указанную на сайте.
Статья познавательная. Прочитал с удовольствием. Спасибо
Автор! дезинформируешь! с пятого экплорера радиальная прозрачность filter: Alpha (style=2)
style=1 линейная прозрачность
style=2 радиальная прозрачность
style=3 квадратная прозрачность
Не хотел цепляться за слова, но придется: в статье нет ни слова про прозрачность и Альфа канал, говорится конкретно про градиент (filter: ….gradient()).
Если можно выполнить радиальный градиент через прозрачность, это наверное здорово, но догадываюсь, что придется городить (для IE) два элемента (один над другим), а статья немного не о том, — она об непосредственной поддержке конкретно градиента.
А в общем, спасибо за наводку, если у Вас в запасе есть ссылка на реализацию указанного примера буду благодарен.
так что, перепиши-ка статейку ;)
:) Буду ждать ссылку на реализацию или пример.
Люди, а как сделать панель сайта, чтобы можно было поднимать до шапки (и фиксировать), как тут http://www.urealty.ru ?
Проблема возникла при использовании рамки с закругленными углами и градиентом в IE
http://www.ex.ua/view_storage/602617872992
Градиент выходит за рамку
Как можно сие чудо решить?
overflow:hidden не пробовали?… не знаю поможет ли, но это первое что в голову пришло :))
Что-то мне подсказывает, что использование overflow:hidden не всегда возможно, к примеру на резиновых кнопках без явной ширины оно неуместно.
Все супер работает, респек автору,,)))
http://www.colorzilla.com/gradient-editor/
Автор лох, все можно делать во всех браузерах даже на тот момент когда писал статью…
Занимайтесь своей диареей в соответствующих местах и не портите здесь воздух.
Спасибо за инфо! просто и понятно, то что нужно :)
/* Для Internet Explorer */
/* Если бы :( … */ Красава
Ну когда же можно будет писать градиент без префиксов… Эт глас народа.