Funky world of Juha

Bizarre and funky world of Juha

CSS Rainbows January 8, 2011

Filed under: CSS3 — juhq @ 3:18 pm

I was sitting on a bus and I started thinking.

How hard it is to create rainbows with CSS?

Is it possible?

Well, atleast for modern browsers it is possible! All you need to know is what are the colors in the rainbow (you can find it easily from wikipedia http://en.wikipedia.org/wiki/Rainbow) and then you might need some help from css3please.com

After that, just add the box_gradient styles to your style, add enough stops (I added 6 stops, as two of the colors are almost identical) and voilà! You got some rainbows in your element!

.rainbow {
  background-image: -moz-linear-gradient(top, #9F59A1, #443090, #1E9FB6, #389C2D, #F7F619, #FB0B0B);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #9F59A1),color-stop(0.2, #443090),color-stop(0.4, #1E9FB6),color-stop(0.6, #389C2D),color-stop(0.8, #F7F619),color-stop(1, #FB0B0B));
}

Small tip, if you want your rainbow be full height and width, add these styles.

.rainbow {
  height: 100%;
  width: 100%;
  position: absolute;
  top:0;
}

Demo can be viewed from http://bin.fi/rainbow.php (won’t work for IE)

Advertisements
 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s