Shadows on page layout

Hey buddies, pls i need a description on the technique for adding shadows to page layout. I’ve alwaz designed my pages without it. but now i think i need that effect to spice it up:p

Thanx in advance

You mean shadows on the left/right sides of the main container?

If so, you need to create an image in your graphics editor of choice and repeat it down the main container in your style sheet:

#container{
  width:700px;
  margin:0 auto;
  background:url(repeating-shadow.jpg) top left repeat-y;
}

Hope it helps.

hey guys, I’ve alwaz designed my webpages without the popular layout shadow. but I think i need 'em now to spice up the page a little :p. can someone please gimme a full detail of how to go abt this. wuld really appreciate it.

Thanks in advance.

Thanks Bpartch,
I’m sure dat would do. I use fireworks for my designs which gives no opportunity to add shadows to both sides of my graphic. I just started my career in Photoshop and I’m quite sure this can be achieved using PS. i dont mind if u can gimme a lil step by step guide on how to go about it in Photoshop.

Thanx in advance.

I do not use Photoshop but I do use fireworks and it should work just fine for this.

  1. Create the background for your main column
  2. Copy it and paste it into a new layer
    3, With the lower of the 2 layers selected change it’s color to black
  3. Then in the properties inspector change it’s “edge” setting to “feather” and set the number on the right of the drop down to your desired amount
  4. Again in the properties inspector adjust the opacity of the shadow layer to meet your desired amount.

I have included a Fireworks .png below for you to look at. Hope it helps. :slight_smile:

Wow! Thanx man! neva knew this technique in fireworks. Thx once again

Hi, first you need to learn to type correct and full sentences. Oderwize we dun no wutchu meen.

If you need a shadow applied to your page try something like this
http://www.visibilityinherit.com/code/shadowed-borders.php

Threads merged

Or you could use CSS3 which now will work cross browser with little to now impact (as it would simply enhance the design for browsers that support it). This entirely removes the need for images and would do the job as you specify. I can understand why Ben offered you that method, but CSS3 is very well supported these days. :slight_smile:

or here
http://alt-web.com/DEMOS/CSS-Shadows.shtml