Picture 2 The Web 2.0 Stripe Generator is one of those great utilities that some good fellows program for us to use freely. This fantastic tool allow us to create, guess what… yeah, stripes!

If you are new to Web 2.0 nowadays design you may wonder why do you need such tool. Well, sometimes we wish to provide our borring form objects some nice background.

Its interface is self explanatory and very easy to use. What I like the most from this tool is its simplicity.

How to use stripes in our CSS Objects

This is even easier, let’s imagine whe are on Stripe Generator:

  1. Play with sliders and color pickers, untill you obtain a super-cool stripe tile
  2. Press “Download” to save your creation
  3. Edit your css adding this line to the element you want to stripe: 
    background-image: url("path-to-stripe.png");
  4. If you want to only repeat horizontally your tile (as in the case of tiles with gradient), you must add this line too: 
    background-repeat: repeat-x;

Example

The following is a picture taken from the contact section of www.antcut.com. I used the above instructions to set the input fields of my document.

Contact Form