Super Stripes


Stripes are undoubtly very popular graphical element these days. They are used in many ways in web design, mostly as background patterns of various layout parts or block elements. Here is a fresh tip that could save your time.

Solid and transparent

When i match colors for some web site, i find it very easy if i use one small .GIF image, which has one stripe transparent and others are solid.  scheme of .gif background

This image alows me just to change background color in CSS:

body { background: red url(diagonals.gif); } /* or green or blue */

and it produces:
red stripes green stripes blue stripes By simply changing background-color, you can end up with some very interesting patterns. I suggest you make yourself a few .GIFs -- white/transparent, black/transparent and transparent with various shades of gray. This way it should be much easier to combine colors that suit your needs.

To make horizontal stripes, just make 3px high, 1px wide .GIF with single top pixel transparent and the other two solid.

Yes, but i need it a lot

Once you're done with above, probably you'd like to fire up your image editor and import stripes. There's a simple trick how to fill some layer with desired striped background and all you have to do is preview your test page in Full Screen and then press Print Screen key. After that just paste it as a new layer or do whatever you want with it. Here's my test page in case you're too lazy : )

Bonus tip

Let's say you're working on web site with deparments that should be separated visualy, but still keeping main visual theme recognized. With Super Stripes, it easy to set different shade at each department, the rest of visual differences i'm leaving to you...

Copyright © 2004.