- This topic is empty.
-
AuthorPosts
-
July 25, 2011 at 2:11 pm #33630JeagerMember
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 #83929TheDocMemberCan you show us where you are using it? Working fine for me:
http://jsfiddle.net/DeBua/July 26, 2011 at 1:12 pm #83994JeagerMemberCant 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 #83995chrisburtonParticipantThat’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 #83996TheDocMemberSo you want it to go:
Green > White > Transparent?
http://jsfiddle.net/DeBua/11/July 26, 2011 at 6:46 pm #84015JeagerMemberNo 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.