Combining the Cicada Principle with CSS3 Background Gradients

Lately I have been trying to use CSS as much as possible without having to make images, especially for backgrounds. A few months back I read about the cicada principle as it relates to design. It was a fascinating read, if you haven't read it already, you should do yourself a favor and read it now. Also check out their cicada gallery for interesting examples of the cicada principle in action.

In the example, the author uses png images and repeats them. I wanted to try and do something similar but done purely in CSS. I found some really good resources dealing with CSS 3 and backgrounds, specifically this one dealing with patterns and a pattern gallery.

These may not work depending upon how new your browser is. See the note about browser compatibility on the pattern gallery.

So naturally I wanted to combine them both into a pure CSS version of the Cicada pattern:

And since it is is all generated with css there are no images and you could get fancier with the colors, gradients, and opacities if you want.

Here is an example of one that takes a single base color (#026873) and adds highlights to it:

Here is the css:

You can see the full examples in the gist.

Posted on 7 Jul 2011