This is a page of testing gradient backgrounds from the CSS3 proposed
standard that is not yet supported in all browsers. I have tried to choose
values that work in either case to produce usable style whether the
browser supports it or not. I have styled paragraphs with and without
the gradient style and left the body and headings with simple color
settings intentionally. This experiment began with a single gradient
that applied to the whole page
I intentionally added a paragraph without the class that does the gradient background to the element. My taste is that this approach is too gaudy, but what it illustrates, quite literally, is how the gradient style gets applied to the element and how, and when the browser supports it. In the case where the browser doesn't support it, I'd like to make sure that the contrast isn't too low between the lettering and the default background. I think that a default background color of white that can be overriden in the case when the graident works would be desirable since white characters against the brightest part of the gradient would become invisible. If I am pushing the bleeding edge and can't have it both ways, a good compromise is to make the background color brighter than it is and leave the text black.
The result is that the class determines what happends to the text in both cases. When the gradient is NOT supported the elements with the class for it have black text, the downside is that when the browser is not doing gradients the contrast is alittle low, and those that do not have the class have white text that has good contrast in either case. I couclude that the best action is to brighten the default background a bit. Actually this got nicely resolved by setting the default backgrounds to the top color of the gradient. This is brighter than the original default background color and it has the added benefit that the gradients blend into the background. I like it.
This is a test of setting a background gradient with CSS3 instead of
using a background image. I did this once before recently but with an
image I created with a special app. I know also that it can be done
with a vector graphics editor like inkscape, but here it is done with
CSS3 directives that tell the browser how to color the background. I
have verified that this works with a late version of Chrome, and I tried
it in Firefox 3.0 which set the background color correctly but did not
do the gradient. I set this up so it applied to the
Although it is my favorite color, it is alittle too dark for either black or white text. It would be better to make it a lighter blue for black lettering or a darker blue for white lettering.
I have solved this problem by reversing the sense of the gradient by setting the "to" attribute to white (#ffffff) so the page gets lighter from top to bottom. As an expirment I set the class for the paragraph tag to the CSS label. This had no effect overall. The gradient still applied to the whole page probably because I set it on the body first and left it that way. Maybe I'd see the gradient applied to each paragraph if I took off the ID for the body and put it back in for the paragraph tags. And it did set the gradient for each element separately. I can't say that it is all that attractive. Maybe I should set a simple background color for the body.
Setting a single color for the body worked. I chose the dark blue that begins the gradient. I also set up a class to color the lettering of the headings white, so they appear better against the darker background, and I added a margin for the paragraph blocks. I'd like the change the text color to white if the browser doesn't support the gradiant CSS.
Another paragraph without the gradient background style, but I also forgot to enforce the margin setting. This may offer a means to apply style to elements one way and override them in another way. That was solved by applying margin and color to the paragraph tag without a class.