Adding Shadows

Xmas day and I decide to code a new portfolio page lol :thumbsup:

http://www.markaylward.co.uk/portfolio/

Anyhow, I'm pleased with the result - seems to work OK in IE/FF anyway (after I contended with IE's peek-a-boo bug!).

What I'd like is some kind of shadow or something - down the right hand side of the page - I see done it all the time, but I'm not quite sure of the best method to do it in this case. Namely due to the fact the header uses a transparent background image to produce the 'page turn' effect, so I can't add borders else it'd look wrong.

Any ideas?

Because of your background image it will be a bit tricky. On a solid color background you could just make an image that is wider than your container so for example make a 780px wide image with 10px on each side being shadows then wrap your container in another div, this div will be the shadow div. It should also be wide enough to hold your shadow image as a background image. What you might be able to do is import your background image well at least a slice of it and make it blend in with your shadows. The alignment may be a bit off though. 780px is the widest a layout can be if you expect it to fit on a 800x600 resolution without a horizontal scrollbar. As for your corner on the header make a diagonal shadow at the same angle as the bend. Make your header position:relative; and then use absolute positioning to position that image in the top corner or just apply the shadow to that bend and then export it again. You would want part of this image to overlap 10px to the right of your container so it "hides" the shadow in that portion.

Thanks.

What I thought really; I think I'll just leave out shadows and keep it simple.

Wow, nice sites mate! Keep up the good work...

lol thanks, and thanks for the email too. ;)