goldenbaby

CSS Drop Shadow Background Effect for your Website

A very easy to follow tutorial on how to quickly create a drop shadow background effect for your website using a small 1px high image and a touch of CSS. EASY!
Note:
I'll be demonstrating this using Macromedia Fireworks, but any other product is fine, i.e Photoshop, Paintshop Pro etc.

Step 1.

Create a new blank canvas with the dimensions 1024 x 1000 pixels in your favorite image editing software.
Give the canvas colour the attribute #F7F4EE

Step 2.

[See attached image for this step]

Create a white rectangle measuring 768 x 900 pixels in the middle of the canvas.

Apply a glow effect to the rectangle, give the glow a dark grey colour I would suggest #666666 and drop the opacity of the glow to 20%. In fireworks it automatically gives a wide spread of shadow, simply adjust the spread to 3 and the fade to 7 with an offset of 0 (See attached image) - If you are using software other than fireworks simply adjust the properties until you have your desired shadow/glow effect.

Step 3.

Rather than using the whole image you have just created, we are going to cut out a 1px high slice spanning the width of your whitebox and the shadow you just created in Step 2. Fireworks has a great tool called "Fit Canvas" - which crops the canvas to the dimensions of all the elements on your screen and removes any unused space. This quickly gives you shadow with equal widths either side of the white rectangle. (See 2nd attached image)

To do this simply use the shortcut Ctrl+Alt+F or Modify -> Canvas -> Fit Canvas.

Now goto Modify -> Canvas -> Canvas Size -> Give it a height of 1px. (This will make sense later)

Goto File -> Export Wizard -> The Web -> Export is as a .jpg (gif's normally don't blend the shadow as well)

Name the image: background.jpg (Put this in your website images foloder)

Result: You will have now created a 1px high image that we can now use to give your website a drop shadow effect.

Note: If you are using image software other than Fireworks and don't have the "Fit canvas" tool - Export the image using a slice measuring 1px high spanning the width of your White Rectangle and Shadow you created in Step 2. Make sure the width is an even number and has covers equal ammounts of shadow either side.

Step 4.

Create a stylesheet and call is styles.css and save it in the root of your website.

Now in Step 3 we created a 1px high image of your background, using CSS we are going to tile (repeat) this image vertically giving you a drop shadow effect no matter how far your website scrolls downwards.

We are going to apply this to the BODY of your website.

Add the following code to your styles.css file:

_________________________

search engine marketing
Online Games