Nice borders, made with pictures

Using images for nice gradient borders is difficult because DIV's often have variable length. The way to solve this problem is to work with nested DIV's. If for example you want to work with these borders:
(left)
(right)

Then use this in your stylesheet:

.main {position: absolute; left: 100px; top: 0px; background-color : #E6E6E6;}
.l {background: url("left.gif") 0 0 repeat-y;}
.r {background: url("right.gif") 100% 0 repeat-y;padding:30px;}

And use this in your page:

Animated gifs in webpages

Animated gifs have been around for quite a while and still they are an interesting way to give your webpage some dynamic feeling. I use them for webpages which redirect after a few seconds. The animated gif should animate the same amount of seconds. You can create animated gifs with the help of an editor. I use Easy Gif Animator but there are plenty around.



The script I use for redirecting is this one:



(4000 is the amount of time).

Gradient backgrounds

Ever wondered how they do that? Those nice gradient backgrounds in Web 2.0 websites like Jquery. I will tell you how to do that.

1. In Illustrator create a picture like this example.
2. In your stylesheet add this line:

BODY { background-image: url(backgr.jpg);

And you're ready!