Кроссбраузерный CSS градиент

Опубликовано: 6 Апрель 2012Автор ratemir

Атрибут CSS градиента существует уже около четырёх лет, но редко используется из-за несовместимости с некоторыми браузерами, которые, в свою очередь, постоянно совершенствуясь, дают всё больше мотивации использовать в стилизации HTML-страниц новые технологии. В этой статье я покажу как применить CSS градиент, чтобы он был виден в основных браузерах, таких как: IE, Firefox 3.6+, Opera 11.1+, Safari и Chrome. И расскажу о сервисе, с помощью которого можно генерировать кроссбраузерный CSS градиент.

Следующие строки кода будут отображать линейный градиент сверху (#ссс) вниз (#000).

Кроссбраузерный CSS градиент

background: #cccccc; /* Для старых браузеров */
background: -moz-linear-gradient(top,  #cccccc 0%, #000000 100%); /* Firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #cccccc 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #cccccc 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #cccccc 0%,#000000 100%); /* IE10+ */
background: linear-gradient(top,  #cccccc 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

Данный код я генерировал с помощью сервиса Ultimate CSS Gradient Generator. Если пользователь использует браузер, который не поддерживает ни одного из этих правил, то будет применена самая первая строка кода «Для старых браузеров». Далее, думаю всё понятно из комментариев, что к чему. Перейдя по ссылке ниже, можно посмотреть примеры кроссбраузерного градиента.

Преимущества применения данного кода на мой взгляд очевидны:

1. С помощью нескольких строчек кода мы получаем возможность избавиться от некоторых изображений. Тем самым уменьшается суммарный вес страницы, количество http-запросов и соответственно снижается скорость загрузки.

2. Удобство применения. Нам не нужно больше прибегать к помощи графического редактора, т.к. теперь достаточно лишь изменить несколько параметров, для достижения цели.

К минусу можно отнести то, что некоторые строки данного кода, в соответствии со стандартами W3C, считаются не валидными.

Хочу ещё остановиться на фильтре(filter) для IE. К сожалению, здесь мы можем указать либо горизонтальный(GradientType=1) или вертикальный(GradientType=0) линейный градиент 2-х цветов: StartColorStr и EndColorStr. Насколько я знаю, диагональный градиент или промежуточные цвета задать невозможно.

Но решение проблемы есть на том же сайте. Правда поддержка радиальных и диагональных градиентов возможна только для IE9. Нужно просто выделить чекбокс с названием «IE9 Support» и следовать инструкции. То есть прописав перед тегом </head> на странице Вашего сайта следующий код:

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

Если страница открылась в браузере Internet Explorer 9, Вы тем самым отключаете работу фильтра. А изображение мы увидим в формате SVG. И не забудьте приписать класс gradient к блоку или кнопке, короче там, где Вы решили показать градиент.

Метки: , Рубрика: Сервисы


Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

2 комментариев к “Кроссбраузерный CSS градиент”

  • verbun
    7 Апрель, 2012, 15:27

    Всё бы хорошо, но как я заметил, на Opera код работает начиная с 11 версии, а мне нужно, чтобы в 10-ке тоже работал. Есть ли хоть какое нить решение. Например, яваскрпипт или ещё что-то.

  • ratemir
    7 Апрель, 2012, 18:20

    verbun, На указанном в статье сервисе, включив поддержку IE9, Вы тем самым разрешите генерацию SVG-картинки. В коде появится что-то вроде этого

    background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8y

    Начиная с 8 версии Opera тоже поддерживает такого рода картинки.

Оставить комментарий

Наверх