расставляй правильно приоритеты и не отвлекайся на мелочи

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

Примеры

Давайте посмотрим на пример кода:

Линейный градиент, сверху вниз


 
Я, - градиент сверху вниз, а не картинка!

Вот, результат:

Я, — градиент сверху вниз, а не картинка!

Линейный градиент, слева направо

Этот градиент перетекает слева направо, по 70% ширине элемента. Конечный цвет, после 70% не будет корректно работать в Internet Explorer; опции FinishX и GradientSize не применяются в фильтре градиента …


 
Я, - градиент слева направо, а не картинка!

Вот, результат:

Я, — градиент слева направо, а не картинка!

Радиальный градиент

Можно позабавиться и сделать радиальный градиент! Но, к сожалению, этот тип градиентов никак не поддерживается в Internet Explorer.


 
Я радиальный градиент!

Вот, результат:

Я радиальный градиент!

Итоги

Для простых линейных градиентов, это решение вполне подходит, что-бы пользоваться им просто из CSS. К сожалению ограниченность возможностей Internet Explorer’а не позволяет наслаждаться всеми типами градиентов в полной мере.

23 комментария на статью:
  1. SMiGL:

    Что то не одного результата не видно :(

    • admin:

      Возможно у Вас Опера, тогда придется подождать (внимательно посмотрите начало статьи)

    • Анонимус:

      /* Для 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. preprogram:

    Не пойму в чём дело, но у меня тока 2 картинки загрузилось. ((( А ваще понравились! :)

  3. Константин:

    У меня FF 3.6 результатов не видно! Загрузите картинками, мы полюбуемся =) спасибо за материал…

    • admin:

      Интересно, а логи моего блога говорят что у Вас:
      «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»

      Прежде чем писАть статью я всегда проверяю то, что в ней заявлено.

  4. veselo:

    У меня тоже — FF 3.6 — эффекта также нет…Надо будет еще раз попробовать — может что-то не так делаю…

  5. betaboy:

    Интересно, а можно с CSS3 сделать 3х цветный градиент под углом? как здесь http://emfire.ru/
    Если кто знает, жду в почту, указанную на сайте.

  6. vitalik:

    Статья познавательная. Прочитал с удовольствием. Спасибо

  7. Airaleais:

    Автор! дезинформируешь! с пятого экплорера радиальная прозрачность filter: Alpha (style=2)

    style=1 линейная прозрачность
    style=2 радиальная прозрачность
    style=3 квадратная прозрачность

    • admin:

      Не хотел цепляться за слова, но придется: в статье нет ни слова про прозрачность и Альфа канал, говорится конкретно про градиент (filter: ….gradient()).
      Если можно выполнить радиальный градиент через прозрачность, это наверное здорово, но догадываюсь, что придется городить (для IE) два элемента (один над другим), а статья немного не о том, — она об непосредственной поддержке конкретно градиента.
      А в общем, спасибо за наводку, если у Вас в запасе есть ссылка на реализацию указанного примера буду благодарен.

  8. Airaleais:

    так что, перепиши-ка статейку ;)

  9. Мики:

    Люди, а как сделать панель сайта, чтобы можно было поднимать до шапки (и фиксировать), как тут http://www.urealty.ru ?

  10. Максим:

    Проблема возникла при использовании рамки с закругленными углами и градиентом в IE

    http://www.ex.ua/view_storage/602617872992

    Градиент выходит за рамку

    Как можно сие чудо решить?

    • Айдар:

      overflow:hidden не пробовали?… не знаю поможет ли, но это первое что в голову пришло :))

      • веб дизайн -ер:

        Что-то мне подсказывает, что использование overflow:hidden не всегда возможно, к примеру на резиновых кнопках без явной ширины оно неуместно.

  11. Vmax-xis:

    Все супер работает, респек автору,,)))

  12. Прохожий:

    Автор лох, все можно делать во всех браузерах даже на тот момент когда писал статью…

  13. Name:

    Спасибо за инфо! просто и понятно, то что нужно :)

  14. Александр:

    /* Для Internet Explorer */
    /* Если бы :( … */ Красава

Ответить
Обязательные поля помечены *