blurry edge backgrounds by css

[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

 

[BootNic]

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% );
}

browser prefixes? Perhaps -webkit-, never -ms- linear-gradient.

gradient could be reduced to:

linear-gradient(
to bottom,
#5192b2 340px,
#ffffff 340px,
#ffffff 341px,
#d9d9d9 341px,
#d9d9d9
);

[snip]

So is that it? gradient background css, so long awaited is just a bit
rubbish for sharp edges? Go back to repeated images?

There is usually more then one way with CSS.

multiple backgrounds:

html {
/*
may need to remove the line wraps
*/
background: linear-gradient(to bottom, #5192b2,#5192b2),linear-gradient(to
bottom, #fff,#fff);
background-color: #d9d9d9;
background-position: top center;
background-repeat: no-repeat;
background-size: 100% 341px,100% 342px;
}

:before and :after, much greater support:

html {
background-color: #d9d9d9;
}
html:after {
background-color: #fff;
height: 1px;
top: 341px;
}
html:before {
background-color: #5192b2;
height: 341px;
top: 0;
}
html:before,html:after {
content: '';
left: 0;
position: absolute;
right: 0;
z-index: -1;
}


--
BootNic Thu May 22, 2014 10:54 am
The human mind treats a new idea the same way the body treats a strange
protein; it rejects it.
*P. B. Medawar*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)

iEYEARECAAYFAlN+D40ACgkQOcdbyBqMFBEUgQCfbinXAoZu+qgxRPqPh+yQLH5e
nHcAn0UIGa75vDda/gt3DH8byWfAZ5m/
=jQ9q
-----END PGP SIGNATURE-----

 

[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% );
}

browser prefixes? Perhaps -webkit-, never -ms- linear-gradient.

gradient could be reduced to:

linear-gradient(
to bottom,
#5192b2 340px,
#ffffff 340px,
#ffffff 341px,
#d9d9d9 341px,
#d9d9d9
);

[snip]

So is that it? gradient background css, so long awaited is just a bit
rubbish for sharp edges? Go back to repeated images?

There is usually more then one way with CSS.

multiple backgrounds:

html {
/*
may need to remove the line wraps
*/
background: linear-gradient(to bottom, #5192b2,#5192b2),linear-gradient(to
bottom, #fff,#fff);
background-color: #d9d9d9;
background-position: top center;
background-repeat: no-repeat;
background-size: 100% 341px,100% 342px;
}

:before and :after, much greater support:

html {
background-color: #d9d9d9;
}
html:after {
background-color: #fff;
height: 1px;
top: 341px;
}
html:before {
background-color: #5192b2;
height: 341px;
top: 0;
}
html:before,html:after {
content: '';
left: 0;
position: absolute;
right: 0;
z-index: -1;
}

Browser prefixes? Can't remember where I got that lot from, but I didn't
think them up for myself. They are shit aren't they?

Multiple backgrounds works well. Thanks for that.

:before and :after - I haven't worked out what is going on there yet,
but I will get my css manual out tomorrow.

Ta.

Tim W

 

[Tim w]

gradient could be reduced to:

linear-gradient(
to bottom,
#5192b2 340px,
#ffffff 340px,
#ffffff 341px,
#d9d9d9 341px,
#d9d9d9
);

[...]

Did you test that? didn't work here. It's a nightmare that single
elaborate gradient declaration. And even when it works it's shabby.

Tim w

 

[Tim w]

Forgot to say thanks for spending the time. Appreciated.

Tim W

 

[BootNic]

On 22/05/2014 15:54, BootNic wrote:
[snip]

browser prefixes? Perhaps -webkit-, never -ms- linear-gradient.

[snip]

Browser prefixes? Can't remember where I got that lot from, but I didn't
think them up for myself. They are shit aren't they?

[snip]

linear-gradient is well supported now without the need for browser
prefixes, perhaps some hand held webkit devices may require the prefix.

It was/is a common practice to add prefixes, such as -ms-, for future
possible comparability. Since ms never used a prefix for linear-gradient,
it is completely useless.

With perhaps the exception of the webkit prefix, prefixes for
linear-gradient is just needless bloat.


--
BootNic Fri May 23, 2014 11:36 am
"If you want to test your memory, try to recall what you were worrying
about one year ago today."
*Rotarian*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)

iEYEARECAAYFAlN/ayIACgkQOcdbyBqMFBHrVACfXkcq+dAHIB5GQ97DtSuMxmmD
ya8AoMYRc7MDs0Q9pZkZP5TzMIuIzRKp
=z4VB
-----END PGP SIGNATURE-----

 

[BootNic]

gradient could be reduced to:
linear-gradient(
to bottom,
#5192b2 340px,
#ffffff 340px,
#ffffff 341px,
#d9d9d9 341px,
#d9d9d9
);

[...]

Did you test that? didn't work here. It's a nightmare that single
elaborate gradient declaration. And even when it works it's shabby.

Is there some reason I should have tested it? The only difference is the
two needles color stops (#5192b2 0 & #d9d9d9 100%) were removed.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>linear-gradient</title>
<style type="text/css">
/*
line wraps may need to be removed
*/
body > div:first-of-type {
background: linear-gradient(to bottom,#5192b2 0,#5192b2 340px,#ffffff
340px,#ffffff 341px,#d9d9d9 341px,#d9d9d9 100%);
left: 0;
right:50%;
}
body > div:last-of-type {
background: linear-gradient(to
bottom,#5192b2 340px,#ffffff 340px,#ffffff 341px,#d9d9d9 341px);
left: 50%;
right:0;
}
div {
position:absolute;
top:0;
bottom:0;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>



--
BootNic Fri May 23, 2014 11:38 am
"I fought the Dharma, and the Dharma won."
*Allen Ginsberg*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)

iEYEARECAAYFAlN/a5QACgkQOcdbyBqMFBEiDQCgi2Pc8lT1invjDExoMRa8QsG/
MikAoJlrKoD+RxgIrxGzjyNC7QhCmYZl
=TPms
-----END PGP SIGNATURE-----

 

[se]

"BootNic" <[email protected]> skrev i meddelelsen

Don't think this works whether removing linewraps in it or not.
As two examples below that should work. The two's result almost
shows identical. The last gradient of the two having no pixels in
it (more often % is used than pizel) are equally dividing the 4
colors in it.:

/*#grad3
{
height:200px;
background: linear-gradient (
to bottom,
#FFFF00 25px,
#FF000F 80px,
#0088FF 150px,
#000 190px );
}*/

#grad3
{
height:200px;
background: linear-gradient (
to bottom,
#FFFF00,
#FF000F,
#0088FF,
#000 );
}