/    Sign up×
Community /Pin to ProfileBookmark

Need drop shadow for entire page

How can I get a drop shadow to show up (on both sides) of my web page? I want it to look like this:

[url]http://taylormadeslings.com/new/index.html[/url]

But this page uses graphic images to create the drop shadows. I want to use css. Is it possible? I have no clue where to begin.

Thanks!

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@WebJoelNov 01.2007 — Maybe some variation of this, which requires the height be known. If made to be height:100% (and the hack that goes with it) and change the width of #outer, you'd have the effect cited in the URL.<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title> New Document </title>

<meta name="Generator" content="" />

<meta name="Author" content="" />

<meta name="Keywords" content="" />

<meta name="Description" content="" />

<style type="text/css">

body, html {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */


#outer {position:relative; left:50px; top:50px; border:4px solid #ececec; background-color:#d7d7d7; width:427px; height:430px}

#inner {position:absolute; left:4px; top:-9px; width:400px; height:400px; border:2px solid #b7b7b7; background-color:white; padding:20px 15px 10px 15px;}

</style>

</head>

<body>

<!-- next is OUTER relative div, which is 'beneith' and has the shadows -->

<div id="outer">

<!-- Next is the INNER absolute div which has white background, padding and YOUR TEXT -->

<!-- As you add YOUR TEXT to INNER, it will expand, so you must also expand W & H of OUTER -->

<div id="inner">

<h3>Some Title</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.

Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,

volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac

dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.

Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla

mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum

metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor

lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan

turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.

Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium

quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar

purus, vel hendrerit ipsum tellus at ante.</p>





</div><!-- end INNER -->

</div><!-- end OUTER -->

</body>

</html>[/QUOTE]
Copy linkTweet thisAlerts:
@CentauriNov 01.2007 — Yeah, that site uses individual graphics in table cells....

You will still need to do the shadow with graphics, but the implementation will depend on the structure of your site. If your site is set up as a centered fixed width, then implementing the shadows is easy - a squat graphic, say 10px high, with a wide central area of your site's content area background colour, and flanked on either side with the gradient shadow effect, can be applied as a background to the body element, centered horizontally and repeated vertically.
×

Success!

Help @joyforlife spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...