Thursday, March 3, 2011

Bokeh with CSS3 Gradients

Ever since Lea Verou mentioned about the possibilities of CSS3 Gradients, I have been using them in various shapes and sizes as a replacement for background images. I recently worked on a project which uses a bunch of circles as a decorative background. gf3 suggested that the circles would look much better like bokeh. Today, I finally got down to creating them.

I referred to some pictures of bokeh, and these were their defining characteristics:

1. There should be groups of circles with same color (each circle outlined with the more opaque version of the fill). In each group, circles are close to each other.

2. The color transition from one color group to the other can be accomplished with a very blurry second color group radial gradient overlaid on the first group.

Read More At :