T
Tim w
This is a question about the rendering quality of css gradient backgrounds.
I was going to use this free holding page template:
http://www.websuccessagency.com/in/coming-soon-demo/blue-horizons-3/
but when I saw that it was all images I thought maybe I would just
quickly copy it but code it better with css so that I could have it
fluid and responsive. Started by doing the blue and grey solid colours
of the background by using css 'gradients' and wrote
html{
background: -moz-linear-gradient(top, #5192b2 0, #5192b2 340px, #ffffff
340px, #ffffff 341px, #d9d9d9 341px, #d9d9d9 100% );
background: -webkit-linear-gradient(top, #5192b2 0, #5192b2 340px,
#ffffff 340px, #ffffff 341px, #d9d9d9 341px, #d9d9d9 100% );
background: -o-linear-gradient(top, #5192b2 0, #5192b2 340px, #ffffff
340px, #ffffff 341px, #d9d9d9 341px, #d9d9d9 100% );
background: -ms-linear-gradient(top, #5192b2 0, #5192b2 340px, #ffffff
340px, #ffffff 341px, #d9d9d9 341px, #d9d9d9 100% );
background: linear-gradient(to bottom, #5192b2 0, #5192b2 340px,
#ffffff 340px, #ffffff 341px, #d9d9d9 341px, #d9d9d9 100% );
}
(Yes, I know normally it would be body{... but that's another issue.)
Suprised to find the result I got was really blurry and nothing like
good enough:
http://demo.cyberpress.biz/comingsoon/
chrome and Opera - awful, FF a bit better but only IE rendered the
background in an acceptably clean fashion.
So is that it? gradient background css, so long awaited is just a bit
rubbish for sharp edges? Go back to repeated images?
Tim w
I was going to use this free holding page template:
http://www.websuccessagency.com/in/coming-soon-demo/blue-horizons-3/
but when I saw that it was all images I thought maybe I would just
quickly copy it but code it better with css so that I could have it
fluid and responsive. Started by doing the blue and grey solid colours
of the background by using css 'gradients' and wrote
html{
background: -moz-linear-gradient(top, #5192b2 0, #5192b2 340px, #ffffff
340px, #ffffff 341px, #d9d9d9 341px, #d9d9d9 100% );
background: -webkit-linear-gradient(top, #5192b2 0, #5192b2 340px,
#ffffff 340px, #ffffff 341px, #d9d9d9 341px, #d9d9d9 100% );
background: -o-linear-gradient(top, #5192b2 0, #5192b2 340px, #ffffff
340px, #ffffff 341px, #d9d9d9 341px, #d9d9d9 100% );
background: -ms-linear-gradient(top, #5192b2 0, #5192b2 340px, #ffffff
340px, #ffffff 341px, #d9d9d9 341px, #d9d9d9 100% );
background: linear-gradient(to bottom, #5192b2 0, #5192b2 340px,
#ffffff 340px, #ffffff 341px, #d9d9d9 341px, #d9d9d9 100% );
}
(Yes, I know normally it would be body{... but that's another issue.)
Suprised to find the result I got was really blurry and nothing like
good enough:
http://demo.cyberpress.biz/comingsoon/
chrome and Opera - awful, FF a bit better but only IE rendered the
background in an acceptably clean fashion.
So is that it? gradient background css, so long awaited is just a bit
rubbish for sharp edges? Go back to repeated images?
Tim w