blurry edge backgrounds by css

Discussion in 'HTML' started by Tim w, May 21, 2014.

  1. Tim w

    Tim w Guest

    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
     
    Tim w, May 21, 2014
    #1
    1. Advertisements

  2. Tim w

    BootNic Guest

    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]
    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-----
     
    BootNic, May 22, 2014
    #2
    1. Advertisements

  3. Tim w

    Tim w Guest

    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, May 23, 2014
    #3
  4. Tim w

    Tim w Guest

     
    Tim w, May 23, 2014
    #4
  5. Tim w

    Tim w Guest

    Forgot to say thanks for spending the time. Appreciated.

    Tim W
     
    Tim w, May 23, 2014
    #5
  6. Tim w

    BootNic Guest

    [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, May 23, 2014
    #6
  7. Tim w

    BootNic Guest

     
    BootNic, May 23, 2014
    #7
  8. Tim w

    se Guest

    "BootNic" <> 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 );
    }
     
    se, May 24, 2014
    #8
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.