Grow your CSS skills. Land your dream job.

Gradients

  • # July 25, 2011 at 2:11 pm

    Using the gradient generator from http://www.colorzilla.com/gradient-editor/

    However when I copy the css and add it to my body, it turns the entire background white.

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(14%,rgba(255,255,255,1)), color-stop(30%,rgba(255,255,255,0.71)), color-stop(40%,rgba(255,255,255,0.53)), color-stop(44%,rgba(255,255,255,0.46)), color-stop(57%,rgba(255,255,255,0.28)), color-stop(70%,rgba(255,255,255,0.14)), color-stop(86%,rgba(255,255,255,0.02)), color-stop(100%,rgba(255,255,255,0)));

    Thats the (obviously) webkit version. Its a simple white to transparent, but when applied, it just makes it all white. Any ideas?

    # July 25, 2011 at 2:17 pm

    Can you show us where you are using it? Working fine for me:

    http://jsfiddle.net/DeBua/

    # July 26, 2011 at 1:12 pm

    Cant give you a link atm, going to a meeting shortly, but in your example you used a different gradient, though I did plug mine into and made a black background and it did work. However, it still fails to work in actual use.

    body {
    line-height: 1;
    font-size:62.5%;
    background:url(../images/background_gradient.png) repeat-x #5cbc04
    -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(14%,rgba(255,255,255,1)), color-stop(30%,rgba(255,255,255,0.71)), color-stop(40%,rgba(255,255,255,0.53)), color-stop(44%,rgba(255,255,255,0.46)), color-stop(57%,rgba(255,255,255,0.28)), color-stop(70%,rgba(255,255,255,0.14)), color-stop(86%,rgba(255,255,255,0.02)), color-stop(100%,rgba(255,255,255,0)));
    font-family: Arial, Helvetica, sans-serif;
    }

    As is right now, the background needs to be the solid green (5cbc04) and then the gradient needs to be at the top, going down, as white. I guess I could make the gradient white to green, however I figured it would be better if I made it white transparent with a background that the main and backup backgrounds would use.

    # July 26, 2011 at 1:23 pm

    That’s the old gradient code I believe for older versions of webkit. @TheDoc has the new markup correct in his fiddle.

    # July 26, 2011 at 1:28 pm

    So you want it to go:

    Green > White > Transparent?

    http://jsfiddle.net/DeBua/11/

    # July 26, 2011 at 6:46 pm

    No no, White to green. The way I wanted to use it was have the green be the normal default background, then the white to transparent over top of it. I can go white to green for the gradient and would be fine, was just trying something different, so if the user couldnt load a css3 gradient, the green background would still load, then a background image of a white > transparent would load up top.

    http://people.ysu.edu/~jtpenezich is the site. Currently the white gradient is a image, and the green background is css.

    But as for now, this is pretty much solved. Thanks for the help, I realized what I was doing wrong. Basically adding fallbacks instead of multiple.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".