Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Adding Shadows

  1. #1
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding Shadows

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

    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?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks.

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

  • #4
    New Coder
    Join Date
    Dec 2005
    Location
    Derby, UK
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, nice sites mate! Keep up the good work...

  • #5
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    lol thanks, and thanks for the email too.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •