Creating the visual effect of halftoning - forming an image out of tiny dots of color - is easy to achieve in a web page with SVG. The technique shown here uses multiple backgrounds in a div element: one repeating grid pattern that is closely related to the effect used in my Pop-Art article, just at a smaller cell size, combined with a bitmap image. I’ve also added a transitioned greyscale filter to desaturate the colors.
Animating CSS Gradients With Filters
Officially, gradients can’t yet be animated. However, using CSS filters, you can animate the color values within them, with a few conditions.
hue-rotate in both CSS and SVG (from which CSS3 filters are derived) moves the visual appearance of an element around the hsl color wheel: red at the top at 0 degrees, green at 120, etc. You might wish to think of hue-rotate as a filter that makes color values “redder”, “bluer”, etc, although its effects are usually more overt than that. The hue-rotate filter is given a degree value depending where it is on the wheel: adding filter: hue-rotate(0deg) to an element that is purely red will make no difference, but increasing the degree value will shift the color of the element through the spectrum.
Basic CSS Radial Gradients
Until recently each browser implemented CSS radial gradients in slightly different ways; finally, the specification has been shaken out to a single, shared standard. Obviously, the specification for radiant gradients is more complicated due to the greater range of options available.
For a linear gradient we can simply specify a starting color, finishing color, and (optionally) a direction. For a radial gradient we must also specify a starting and finishing color, with optional additions of the source location of the gradient will start, where the outer color will stop in the containing element, and the overall shape of the gradient.