Sunday, September 19, 2010

Applying a css background gradient to an element

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 <body> element, but as the subtitle says it can apply to any element. I am going to play around with it.

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 ID 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.

Free Web Hosting