When we look at a computer screen and see a 3d image it isn’t really 3d it has just been shaded. We add an imaginary light point. Parts of an object closest to and facing our light point we color slightly lighter than those further away.
Another word for shading it ‘gradient’. Most graphics programs will have some built in gradients and make it easy for you to create them. CSS lets you tile a background strip either horizontally or vertically.
We will create a shaded vertical strip 128×1200 pixels.
I did this in Gimp. I created a 140×1200 strip. I then made two 140×600 images. I painted one with a brown gradient. Use the ‘fill with gradient’ button, and I chose ‘Golden’ for the sand and ‘Deep Sea’ for the sky. Click your mouse at one end of the image and drag the line across to the other end and click and the gradient will fill the area.
The green shade button, second row, 3rd from right does gradients.
The black shaded area under the dot and woodlike texture bottom right is where you click to change the gradient.
The button in the middle of the second row left of T is what you use to flip your images.
To make the gold part have some texture like sand I used Filters->Artistic->Gimpressionist->Paper and the default settings. Click OK. I then copied and pasted the golden gradient in the bottom and the blue gradient in the top of my large strip. Anchor the layers down.
Next crop the image to 128×1200. This gets rid of any white pixels that may be hanging around the edges. To keep the image from having seams when you tile it select Dialog-> Layers and make a duplicate layer. Then select the ‘Flip Layer or Selection’ button. Flip the top layer horizontally. Then in the layer box make it 50% opacity. That will erase any seams there might be.
In your HTML you’ll need to center this background vertically and tile it horizontally.
<head>
<title></title>
<style type=”text/css”>
body {
background-image: url(sand-sky.jpg);
background-repeat: repeat-x;
background-position: center;
}
</style>
</head>
You can download the background to look at, experiment or use here
0 responses so far ↓
There are no comments yet...Kick things off by filling out the form below.
You must log in to post a comment.