CSS Gradients

Dave Hyatt over at WebKit has posted about gradients specified in CSS. There are two types of gradients: linear gradients and radial gradients. Gradient in CSS is an image, usable anywhere that image URLs were used before. You can use gradients in the following places:So what exactly is a gradient in CSS? It is an image, usable anywhere […]

Dave Hyatt over at WebKit has posted about gradients specified in CSS. There are two types of gradients: linear gradients and radial gradients. Gradient in CSS is an image, usable anywhere that image URLs were used before. You can use gradients in the following places:So what exactly is a gradient in CSS? It is an image, usable anywhere that image URLs were used before. That’s right… anywhere.

  • background-image
  • border-image
  • list-style-image
  • 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.

Paraphrasing the HTML5 spec and adjusting the language slightly to not be canvas-specific:

“The color of the gradient at each stop is the color specified for that stop. Between each such stop, the colors and the alpha component must be linearly interpolated over the RGBA space without premultiplying the alpha value to find the color to use at that offset. Before the first stop, the color must be the color of the first stop. After the last stop, the color must be the color of the last stop. When there are no stops, the gradient is transparent black.

More info....

Source:→ Ajaxian

HTML5, CSS, Gradient, Safari, Browser, Canvas