Whats the best way to go about adding a gradient?

 

I read once that the best way is to create a gradient 1px wide and repeat-x it rather than use one big gradient that spans the entire page, I struggle to see what the difference is between lets say a 10mb gradient and 10x 1mb gradients as they both amount to 10mb.

 

I'm weary about using the css3 gradient because I've heard different browsers give out very different results and its early days for css3 so it may be likely that the code will change.

 

Also I've noticed some image gradients give out a subtle but noticable ugly stripe effect is this just down to format or the software?

 

My website needs some gradient but I want to keep loading time to a minimum.

 

Thanks.

 

http://openwide.orgfree.com

Edited June 22, 201214 yr by openwide

I read once that the best way is to create a gradient 1px wide and repeat-x it rather than use one big gradient that spans the entire page, I struggle to see what the difference is between lets say a 10mb gradient and 10x 1mb gradients as they both amount to 10mb.

 

No they don't.

With the smaller image you're only loading the small image once and then using that one image to repeat across the page, thus you only have to load the image once.

 

I'm weary about using the css3 gradient because I've heard different browsers give out very different results and its early days for css3 so it may be likely that the code will change.

 

It's highly unlikely that the CSS gradient declaration will change.

If you want to be super safe, you can use the webkit, opera and gecko prefixes

 

Also I've noticed some image gradients give out a subtle but noticable ugly stripe effect is this just down to format or the software?

 

Down to bad image creation/exporting, on the designers side.

 

 

My website needs some gradient but I want to keep loading time to a minimum.

 

Thanks.

 

 

CSS3 all the way then.

Absolutely go with CSS gradients, browser support is good, don't forget to specify a default background colour for older browser that don't support gradients and you're good to go.

Also, CSS3 gradients won't stretch or clip. Image ones will, because they can't dynamically adjust in size.

Ok thanks everyone, CSS3 it is.

 

If the mods want to close this thread please go ahead.

Edited June 22, 201214 yr by openwide

It looks great in mozilla but it's not working in ie, any idea why? heres my css

 

body{background-image: linear-gradient(left , #222 0%, #333 50%, #222 100%);

background-image:-o-linear-gradient(left , #222 0%, #333 50%, #222 100%);

background-image:-moz-linear-gradient(left , #222 0%, #333 50%, #222 100%);

background-image:-webkit-linear-gradient(left , #222 0%, #333 50%, #222 100%);

background-image:-ms-linear-gradient(left , #222 0%, #333 50%, #222 100%);

background-image:-webkit-gradient(linear,left top,right top,color-stop(0, #222),color-stop(0.5, #333),color-stop(1, #222));

background-color:#111;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:16px;}

What version if IE are you using? CSS gradients are only supported in IE10+, for earlier versions of IE just let it fall back to your default bg colour.

What version if IE are you using? CSS gradients are only supported in IE10+, for earlier versions of IE just let it fall back to your default bg colour.

 

IE9 supports SVG gradients. The problem is, if you support IE8 etc, you'll be using the filter property which over-rides the SVG in IE9. Because the filter gradients are only two stop, they don't look as nice, so you wanna do something like this, as on colorzilla:

 

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

It looks great in mozilla but it's not working in ie, any idea why? heres my css

 

body{background-image: linear-gradient(left , #222 0%, #333 50%, #222 100%);

background-image:-o-linear-gradient(left , #222 0%, #333 50%, #222 100%);

background-image:-moz-linear-gradient(left , #222 0%, #333 50%, #222 100%);

background-image:-webkit-linear-gradient(left , #222 0%, #333 50%, #222 100%);

background-image:-ms-linear-gradient(left , #222 0%, #333 50%, #222 100%);

background-image:-webkit-gradient(linear,left top,right top,color-stop(0, #222),color-stop(0.5, #333),color-stop(1, #222));

background-color:#111;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:16px;}

 

 

background: #222222;

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMjIyMjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top, #222222 0%, #333333 50%, #222222 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(50%,#333333), color-stop(100%,#222222));

background: -webkit-linear-gradient(top, #222222 0%,#333333 50%,#222222 100%);

background: -o-linear-gradient(top, #222222 0%,#333333 50%,#222222 100%);

background: -ms-linear-gradient(top, #222222 0%,#333333 50%,#222222 100%);

background: linear-gradient(top, #222222 0%,#333333 50%,#222222 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#222222',GradientType=0 );

 

That should work for you, but make sure you put the other code snippet above in the header of your document.

 

Well this is what I do anyway

Jesus Christ!? all this for a gradient lol,

 

It's still not working in ie, i've got ie9 by the way

 

I've got some crazy bug in ie too, each time I refresh the page a random embedded video is replaced by one of the embeded javascript rss feeds!?

Edited June 23, 201214 yr by openwide

What version if IE are you using? CSS gradients are only supported in IE10+, for earlier versions of IE just let it fall back to your default bg colour.

 

Not true, you can use:

 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#colour',endColorstr='#colour');

 

edit: doh just seen this has been posted 1 above.

Edited June 23, 201214 yr by MMMedia

Jesus Christ!? all this for a gradient lol,

 

It's still not working in ie, i've got ie9 by the way

 

I've got some crazy bug in ie too, each time I refresh the page a random embedded video is replaced by one of the embeded javascript rss feeds!?

 

 

The code I posted will definitely produce IE friendly gradients, however bare in mind with IE8 and below they will be reduced to two stop gradients, so only two colours, so they won't look quite the same.

 

If they definitely aren't showing though there must be other issues with your code.

 

It is a lot of CSS, but if you use the colorzilla gradient generator, you don't need to write it out manually.

 

Eventually when the browsers have sorted out their ridiculous prefix issues, you'll only need to have 1/2 lines.

Personally I'd just stick with a gradient image 1px wide and repeat-x.

Ok its all seems to be sorted (for now at least) thanks everyone.

 

Mods feel free to close the thread.

It doesn't validate, should it?

It all seems to be working fine.

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fopenwide.orgfree.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

It doesn't validate, should it?

 

Nope, don't worry about it.

Personally I'd just stick with a gradient image 1px wide and repeat-x.

 

 

Yes, but that is only going to work for one element. If you apply the same gradient to different elements, because it has a fixed height, it will either get squashed or stretched.

 

That ain't a cool look. CSS3 gradients are fully fluid without decrease in quality, so they will always look better when applied to multiple elements.

 

Seriously, there's no reason not to use CSS3 gradients and it saves a ton of http requests, making every site that uses them all the faster for it.

 

If you still wanna make your gradients in Photoshop that's fine, Colorzilla can convert.

You might want to stick to using images if you need a consistent gradient across columns of varying heights - a case in which you do not want the gradient to stretch vertically.