Sunday, September 19, 2010

CSS3 Radial Gradient as a page background

I am trying to use a radial gradient that looks like a spotlight to behave like a background to this ordinary text. If your browser doesn't support the gradient style, you will see a boring black text on a white background, albeit with nice margins all around.

I am curious to know if 1) Does this scale with the page size no matter what that is, and 2) can I control the parameters of the gradient such as how fast it goes from its brightest todarkest color. I already reversed the direction of bright to dark to give it a spotlight effect.

The background does scale to whever screen size is set for the browser. I'd like to make the gradient shallower toward the white end. I found out by playing with the paremeters that the third parameter does that. I'll have to see if I can find the standards document for this, but it looks like the percentage values position the focus of the radial brightness in X and Y positions and the two integers give the dynamic range. The larger the third parameter the brighter the background is.

Even though I know that the gradient background fills whatever the page size is, I don't know how ugly it would get if the page were long and skiny, if I typed alot. The failsafe is to limit onself to a screenfull for each page.

Please remember that this would have to be done as a background image and that here it is done on the fly by the CSS engine in the browser.

The gradient repeats to fill available area, it really doesn't float, as I thought, but it is seamless, not the ugly hard edges you get with image backgrounds.

Now, what I would like to do is to create a background that has two pastel colors that are the reverse of the spotlight and are positioned on different parts of the page, or could it be called "canvas", in this case.

The Bottom Margin appearently makes no sense in a division as I can't get either Firefox 3.0 or Chrome to honor it. This looks like a bug unless I am misunderstanding something about <div>.

Free Web Hosting