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

    Кроссбраузерный CSS3 градиент? с поддержкой Opera

    Для FF используется -moz-linear-gradient, для Safari/Chrome — -webkit-gradient, для IE — DXImageTransform.Microsoft.gradient.

    Вот только Opera 10 ещё не поддерживает CSS3 Gradient :(


    Зато она поддерживает масштабирование background-image!
    Рисуем маленький градиент в фотошопе, подключаем его через data:URI и масштабируем на размер блока!

    background-size — для Opera, -o-background-size — для старой Opera, -webkit-background-size — для старого Safari, -khtml-background-size — для Konqueror.

    background-clip и background-origin — для кроссбраузерного отображения фона при наличии border.
    base64-кодирование — для оптимизации, можно конечно и отдельную картинку грузить.

    div.lipsum {padding: 2em; border: 10px dashed #000;<br/><br/>  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACACAMAAAD9J/PGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUdQTFRF/Pz8zc3N2traz8/P0NDR0tLS0NDQ9fX1+Pj4//7/9PT04uLi6Ojo39/fzs3NzMzM/f7+3Nzc9fb26uvq6urp4ODh9/f44+Pj+vn519fX29zb19bX1tXV6Onp5OPk2dnY+/r79vX1+vv7+vr6+Pn4+fr6/////v7+0dHR09PT/fz80tPS0dHS/Pv78vPzzs7P/v39zs7O7/Dv/f393t7d8vLx3+Dg2drZ8PDw8fHw5+bn2dnZ7ezt7+/v5eXl5OTl+fn46+vr7u7u6urq1NTV1dXV4ODg2NnY7O3s19fY09TUz87P4eHh09PS9PP0zczM7u7t3Nzd8vLy29va8fHx5uXm5ubm7u7v5OTk1dXU19fW3Nvc5+fn+/v71tbV3d3dz87O7Ovs6Ofn3t7e9vf28/Pz4+Pi7Ozs8O/v9/f31NTT/P399vb3QCtbEwAAAKZJREFUeNokw9NSBQAUQNGV3c22bdu2bdf/P3em9potIWFf0p/8MKjfg20pIT2khg490kK3XZ22fLm0YlWNO1eqVdq0rt60ccnhWJVrhwrdG/EsL4xZU2pHTnhTrs6FeXNOnZly40luqFViWbFFj95tmHFgyblZH4ZMmHRi1JE+r/Zkh4zQqMiPF5/KZIYWCyq0atakwa1e/3X5NmxAQcjSHrf9CjAAht4XiD8Rf/EAAAAASUVORK5CYII=)<br/>    no-repeat;<br/>  -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; -khtml-background-size: 100% 100%; background-size: 100% 100%;<br/> <br/>  background: -moz-linear-gradient(top,#ccc,#fff);<br/>  background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));<br/>  filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#cccccc,endColorstr=#ffffff,GradientType=0); zoom: 1;<br/>  background: linear-gradient(top,#ccc,#fff);<br/> <br/>  background-clip: border-box; -moz-background-clip: border; -webkit-background-clip: border-box;<br/>  background-origin: border-box; -moz-background-origin: border; -webkit-background-origin: border-box;<br/>} <br/>


    Пример (работает в IE6/7/8,FF3.6,SF3/4,Chrome,Opera 9.6/10)

    К сожалению в FF3.5 не работает ни gradient ни background-size, но его доля всего 5% и она уменьшается вдвое каждый месяц (март 2010 / апрель 2010).

    Для него можно повесить большую картинку:
    @-moz-document url-prefix()
    {
      div.lipsum {background: url("%some-big-gradient-image%"); background: -moz-linear-gradient(top,#ccc,#fff);}
    }


    RTFM:

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 34

      +3
      А на svg, помоему, проще. И градиент будет не масштабированной картинкой, которая в разных версиях может по разному масштабироваться, и цвета можно задавать прямо в цсс без экспорта и кодирования картинок.
        +2
        да, хорошая идея, согласен.

        Но мне dataURI+background-size кажется более компактным и читабельным вариантом.
        Плюс можно сделать эту картинку длинной и показывать её юзерам FF3.5 и ниже.

        Картинке прийдется масштабироваться только в Opera, я проверил 9.6/10.10/10.5 — отлично растягивает из малюсенькой картинки 1x128px.
        • UFO just landed and posted this here
          • UFO just landed and posted this here
              +1
              Согласен, SVG можно в dataURI запихнуть и даже кодировать на лету и по-логике должно быть лучше качество (правда css ещё замороченней будет), но практика показала иной результат!

              Вот сравнение маленькой картинки растянутой до 860px и чистого SVG. На SVG лесенка видна :(
              • UFO just landed and posted this here
                  0
                  проверил в FF, Safari, Chrome, только в Safari — нормальный градиент.

                  вы могли бы выложить свой скрин?
                  получается в FF под Mac всё ок, а под винду — нет?

                  у меня Vista x32 SP2.
                  • UFO just landed and posted this here
          +2
          К сожалению в FF3.5 не работает ни gradient ни background-size, но его доля всего 5%
          Вы странно считаете. Доля всех фаерфоксов версии 3.5 и ниже — 9,1%
            +1
            да, действительно, около 8-9, но такими темпами как уменьшается их доля, через месяц-два мы уже о них и не будем вспоминать.
            +1
            скорее бы всё стандартизировалось уже… Я согласен не поддерживать несколько устаревших браузерах, но писать ТАКОЕ — какое-то сомнительное удовольствие.
              +5
              тысяча извинений, что дурачусь… такая большая зелёная строка base64 и в конце у ней смайлик =))))))))))
                +4
                Ну и рыба в примере.
                  +3
                  Раньше костыли писали для IE, теперь для Opera…
                    0
                    Не совсем так. Для IE писали костыли, чтобы он показывал то, что уже в стандартах. background-gradient никак не стандарт ещё, так что требовать от всех браузеров его показывать несколько преждевременно.

                    К тому же, тут костыль нужен и для IE.
                    +1
                    Где взяли рыбу? Хочу узнать с чего все началось и чем закончится…
                      +1
                      с другом (сейчас он мой напарник, на Flex пишет) написали в 2003 году.

                      вот целиком: cyberfight.ru/site/columns/25/article_30165/
                        +1
                        [offtopic]
                        Разрешение экрана меняется, а c58 всё такой же. А когда-то я на него смотрел как на эталонный портал o_O
                        [/offtopic]
                      +1
                      Спасибо за напоминание о Q3ARENA:2003! Сразу молодость спомнилась :)
                        +3
                        Вот смотрю я на эти чудеса CSS ради сомнительного удовольствия растянуть градиент на блок и понимаю, что лучше старой доброй картинки в фоне пока ничего нет. Да она не тянется и цвет градиента не поменять, но она работает на 100% в любом браузере и не требует такого безумного количество фигни в CSS писать.
                        • UFO just landed and posted this here
                            0
                            Я победил эту проблему, с помощью задания правильного doctype.
                              +2
                              это какой?
                              смена doctype HTML 5 на XHTML 1.0 Strict ничего не изменила
                                0
                                Transitional.
                                  +1
                                  попробовал, ничего не изменилось.

                                  можно скрин?
                                  какая версия винды?
                          0
                          Картинка с градиентом 1х150 в PNG24 весит ~300 байт. CSS`а по стандартной схеме (background-repeat) максимум на 200 байт, против вот этой полутора килобайтовой хуеты; время изменения файла с градиентом не больше 3-ех минут, как здесь — пол минуты. Если ваша работа заключается в изменениии градиентов в бэках миллионов сайтов — этот способ, несомненно, хорош. В остальном: нахуя козе баян?
                            +1
                            смысл в том, что градиент подстраивается под размеры блока
                              –4
                              Сомнительная полезность. Я вижу применимость только в фоне разного рода плашек и кнопок, где обрезанный бэк-градиент (в случае применения изображений) играет ничтожную роль в качестве отображения.
                                +1
                                Всё, ребята, расходимся — acy не видит смысла в градиентах :'(
                            –1
                            может еще стоит добавить background:linear-gradient(top,#ccc,#fff); для браузеров, которые будут поддерживать css3 фишки в будущем?
                            • UFO just landed and posted this here
                                0
                                спека пока лишь Editor's Draft но почему-бы и нет!
                                спасибо, добвил.
                                0
                                Если добавить fixed для -moz-linear-gradient, -webkit-gradient, Microsoft.gradient, то Opera перестает вообще background показывать
                                  0
                                  Opera 11 поддерживает css3 gradient -o-linear-gradient

                                  Only users with full accounts can post comments. Log in, please.