Pull to refresh

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

Reading time 3 min
Views 63K
Кроссбраузерный 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:

Tags:
Hubs:
+36
Comments 34
Comments Comments 34

Articles