3 Replies - 2469 Views - Last Post: 20 September 2010 - 12:49 PM

#1 Alhazred  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 198
  • Joined: 25-July 07

How to add a shadow to a site

Posted 20 September 2010 - 09:10 AM

I've got a simple one column layout.
I've got 4 elements in it which are 4 rectangular divs.
Now I want to give a shadow effect to the right, bottom and lower right corner.

I already created the imades which will form the shadow.
My problem is how to add the 3 divs where to place the images as background.
I should add 1 div on the right and 2 divs as last row (1 for the bottom shadow and 1 for the corner).

How do I have to modify my code?
<body>
<div id="container">
	<div id="header">Header</div>
	<div id="navigation">Menu</div>
	<div id="content">Content</div>
	<div id="footer">Footer</div>
</div>
</body>


body {
	margin: 0px;
	padding: 50px 0px 0px 0px;
	text-align: center;
	background-color: #fff;
}

div#container {
	width: 920px;
	margin: 0px auto;
	text-align: left;
}

div#header {
	background-color: red;
	padding: 10px 0px 10px 10px;
	margin: 0px;
}

div#content {
	background-color: lightblue;
	height: 400px;
}

div#footer {
	clear: both;
	background-color: lightgreen;
	color:#000;
	text-align:left;
}



Is This A Good Question/Topic? 0
  • +

Replies To: How to add a shadow to a site

#2 Atli  Icon User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4240
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: How to add a shadow to a site

Posted 20 September 2010 - 10:11 AM

I've used something like this before to create a shadow effect surrounding a page. Shouldn't be hard to modify the images to just show shadows on two sides rather than four.

<body>
    <div id="MainShadow">
        <div id="TopShadow"></div>
        <div id="PageWrapper">
            <div id="MainPage">
                <div id="Header"></div>
                <div id="Menu"></div>
                <div id="Content"></div>
                <div id="Footer"></div>
            </div>
        </div>
        <div id="BottomShadow"></div>
    </div>
</body>

#MainShadow {
    width : 810px;
    margin : 25px auto;
    padding : 1px 0;
    background : url(middle.png) repeat-y;
}
#TopShadow {
    position : relative;
    height : 20px;
    margin : -11px 0 0 0;
    background : url(top.png);
}
#BottomShadow {
    position : relative;
    height : 20px;
    margin : -10px 0 -11px 0;
    background : url(bottom.png) repeat-x;
}

#PageWrapper {
    position : relative;
    width : 790px;
    margin : -11px 10px 0 10px;
    padding : 0;
    z-index : 2;
    background: #f00;
}
#MainPage {
    min-height : 100px;
    margin : 0 auto;
    padding : 1px;
    background-color : #edeae7;
}

/* These fix margin errors where if elements like <h1> are the
 * first element in these divs it would create gaps between them. */
#Header:before, #Menu:before, #Content:before, #Footer:before,
#Header:after, #Menu:after, #Content:after, #Footer:after {
    display: block;
    content:" ";
    height: 1px;
}

#Header, #Menu , #Content, #Footer {
    width: 100%;
    height: 75px;
}


The top and bottom shadows are fixed width images that include the corners (see the attached files). It's possible to make them scale with the width of the page, but I've never really had any reason to use it so I don't have examples of that on hand.

And then there is also the box-shadow CSS3 style. All major browsers now have experimental support for it, even the IE9 beta. Granted, we will have to suffer IE7 and IE8 for a while, but still.

Attached image(s)

  • Attached Image
  • Attached Image
  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#3 Alhazred  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 198
  • Joined: 25-July 07

Re: How to add a shadow to a site

Posted 20 September 2010 - 11:05 AM

Thanks, I've solved modifying your code :)
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: How to add a shadow to a site

Posted 20 September 2010 - 12:49 PM

If you want less HTTP requests you can make the top and bottom 1 image because your heights will be set and then use background-position to move the image around.

--

Greg
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1