Tuesday, April 15th, 2008
Dave Hyatt, the one person I would love to get to TAE to join the other browsers, posted about CSS gradients in WebKit:
- -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
So what exactly is a gradient in CSS? It is an image, usable anywhere that image URLs were used before. Thatâ€™s rightâ€¦ anywhere. :)
You can use gradients in the following places:
- content property
The type of a gradient is either linear or radial.
A point is a pair of space-separated values. The syntax supports numbers, percentages or the keywords top, bottom, left and right for point values.
A radius is a number and may only be specified when the gradient type is radial.
A stop is a function, color-stop, that takes two arguments, the stop value (either a percentage or a number between 0 and 1.0), and a color (any valid CSS color). In addition the shorthand functions from and to are supported. These functions only require a color argument and are equivalent to color-stop(0, â€¦) and color-stop(1.0, â€¦) respectively.
This is great stuff. Think about the image repeating tricks you have had to do just to get some of this behaviour. This is much more elegant.
There are a bunch of examples:
And in conclusion, we have a lot more coming:
WebKit now supports a generic architecture for generated images, making it easy to add new generator effects to CSS in the future (lenticular halos, checkerboards, starbursts, etc.). The rules for sizing of these generated images will match whatever is decided for SVG content with no intrinsic size (the two are sharing the same rules right now).
We encourage you to try gradients out and file bugs if you see any unexpected or weird behavior. They will degrade safely in other browsers as long as you use multiple declarations (e.g., specify the image in one declaration and the gradient in a following declaration).
Posted by Dion Almaer at 12:01 am