Crossbrowser CSS3 gradient

For FF, use -moz-linear-gradient , for Safari / Chrome - -webkit-gradient , for IE - DXImageTransform.Microsoft.gradient . DXImageTransform.Microsoft.gradient .



But Opera 10 still does not support CSS3 Gradient :(



')

But it supports scaling background-image !

We draw a small gradient in Photoshop, connect it via data: URI and scale it to the block size!



background-size for Opera, -o-background-size for old Opera, -webkit-background-size for old Safari, -khtml-background-size for Konqueror.



background-clip and background-origin - for cross-browser background display with a border .

Base64 encoding - for optimization, you can of course load a separate image.

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/>

Example (works in IE6 / 7/8, FF3.6, SF3 / 4, Chrome, Opera 9.6 / 10)



Unfortunately, neither gradient nor background-size works in FF3.5, but its share is only 5% and it is halved every month ( March 2010 / April 2010 ).



For it you can hang a big picture:

@-moz-document url-prefix()

{

div.lipsum {background: url("%some-big-gradient-image%"); background: -moz-linear-gradient(top,#ccc,#fff);}

}

RTFM:

• Linear gradient - actually gradients themselves [ -moz-linear-gradient / -webkit-gradient / DXImageTransform.Microsoft.Gradient ]
• background-clip - where the background is displayed [ -moz-background-clip / -webkit-background-clip ]
• background-origin - where the background is positioned from [ -moz-background-origin / -webkit-background-origin ]
• background-size - background size [ -o-background-size / -webkit-background-size ]