SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Apr 2009
    Location
    West Africa
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Thanx in advance

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code CSS:
    #container{
      width:700px;
      margin:0 auto;
      background:url(repeating-shadow.jpg) top left repeat-y;
    }
    Hope it helps.

  3. #3
    SitePoint Member
    Join Date
    Apr 2009
    Location
    West Africa
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Shadows on page layout

    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 . can someone please gimme a full detail of how to go abt this. wuld really appreciate it.

    Thanks in advance.

  4. #4
    SitePoint Member
    Join Date
    Apr 2009
    Location
    West Africa
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    4. 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
    5. 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.
    Attached Images Attached Images

  6. #6
    SitePoint Member
    Join Date
    Apr 2009
    Location
    West Africa
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! Thanx man! neva knew this technique in fireworks. Thx once again

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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/cod...ed-borders.php
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Threads merged

  9. #9
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

    http://www.css3.info/preview/box-shadow/

  10. #10
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

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