SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Shadow efect

  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Shadow efect

    I've started to create HTML websites, and I have a question about design. I want to get this efect in page borders, an efect like a shadow. But a shadow for all the page background between the content background and the <body> background.

    I don't know how to do it and I want to learn. If someone could be so helpful I will be very plesant.

    Thanks.

    PD: excuse for my english, I'm from Spain. I hope you can understand me.

  2. #2
    SitePoint Member caesaraldhela's Avatar
    Join Date
    Apr 2008
    Location
    Poncokusumo Malang
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Morpheo,

    1st welcome to the forum and did you have introduce yourself in Introduction section?
    (i'm newbie too )

    As i know i usually used css to make drop shadow, you can figure out in phoenity.com/newtedge/drop_shadow/

    Good luck

  3. #3
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The efect I want to get is this:

    img115.imageshack.us/img115/9950/imagenkp9rr6.jpg

  4. #4
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're using a fixed width layout then make an image in your graphics editor which is basically a slice across the layout - shadow, content background colour, shadow which only needs to be about 10px high. Then apply it as a vertically repeating background to the body element in the stylesheet like this (assuming a white background):

    body {background:#fff url(../images/background.jpg) repeat-y center top;}

    You can do this more or less on fluid layouts too - it's just a bit more fiddly.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  5. #5
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I have right now is a background gradient with REPEAT-X to get that gradient. Your solution Tailslide is perfect but online one problem, if I do REPEAT-Y I can't make a gradient background.

    Anyway, is a great solution. I will put that in the website and I'm going to see if it's beautiful or not.

    Thank you

  6. #6
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    repeat-x will repeat the image horizontally. repeat-y will repeat it vertically so if you want a shadow effect to appear vertically down the page (e.g for a shadow border down the edge of the main container) then you'd want repeat-y.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project


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
  •