Reputation: 7663
I have this class set for a page I'm testing (just starting to try to implement CSS3 so go easy on me).
.CSS3TESTDIV{
width:228px;
height:300px;
background-color: #fff3;
background-image: -moz-linear-gradient(0% 100% 90deg, #0068b3, #fff);
background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#fff), to(#0068b3));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #0068b3;
padding: 10px;
margin:0 10px 0 0;
-moz-box-shadow: 7px 7px 7px #888;
-webkid-box-shadow: 7px 7px 7px #888;
box-shadow: 7px 7x 7px #888;
float:left;
}
Everything looks good in FF on PC and Mac, I know that IE does not support this.
My question is about the gradient: From what I have above the gradient is fairly smooth, but I just want a little of the blue to creep up from the bottom, not fade up as high as i see it on my browser. I have played with the percentages and values, but I can't really seem to make it the way I want.
How can i get the effect im looking for?
Again, i want mostly white from top to bottom, and just a little of the blue at the bottom fading up. thanks
Upvotes: 2
Views: 1446
Reputation: 73
Quite right, there is another site which I use quite a bit called ColorZilla.
It is very useful, especially for making sure that all browsers will see your gradient. ( I have slipped up there before :/ )
Upvotes: 0
Reputation: 72222
You want to use color stops.
So set the first color at 0%, second at 90%, and 3rd at 100% (which will be the blue).
You can use this tool to get your desired effect http://gradients.glrzad.com/
Make sure you add a 3rd color though and position it at 90%.
Cheers,
Marko
Upvotes: 1