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.

Comments

2 Comments so far. Leave a comment below.
  1. Great, looks very nice! Reminds me of Lea Verou’s CSS3 gradient patterns gallery, perhaps you should submit this to it. http://leaverou.me/css3patterns/

  2. Interesting read Randy, thanks. When it comes to complicated bg’s that can relatively easy be expressed as vectors, i always use raphael’s js. Something like an html5 canvas that works in all browsers and combined with – let’s say – jquery or your fav js lib, can make wonderful stuff.

Add Your Comments

Disclaimer
Your email is never published nor shared.
Required
Required
Tips

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <ol> <ul> <li> <strong>

Ready?