/    Sign up×
Community /Pin to ProfileBookmark

Drop Shadow Help!

Copy linkTweet thisAlerts:
Sep 12.2007

Hey guys,

I’m really struggling with this layout issue. I am trying to implement a drop shadow on a layout that will be changing on height depending on amount of content.

I am using an absolutely positioned div wrapper to center the whole page. I put another div container inside that with an image that is a long strip and has the drop shadow for each side of the layout. I’m trying to repeat this image down this container and then overlay a slightly smaller container to hold the page content.

I am almost sure that there is a better way to do this so I am turning to you all for help.

Any ideas?

Thanks in advance!

Joseph

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@nshiellSep 12.2007 — ooo fun:

Lay out like:

[COLOR="Magenta"]XXXXXXXXXXXXXXXXX[COLOR="Blue"]XX[/COLOR]

XXXXXXXXXXXXXXXXX[COLOR="Green"]XX[/COLOR]

XXXXXXXXXXXXXXXXX[COLOR="Green"]XX[/COLOR]

XXXXXXXXXXXXXXXXX[COLOR="Green"]XX[/COLOR]

XXXXXXXXXXXXXXXXX[COLOR="Green"]XX[/COLOR]

XXXXXXXXXXXXXXXXX[COLOR="Green"]XX[/COLOR]

XXXXXXXXXXXXXXXXX[COLOR="Green"]XX[/COLOR]

XXXXXXXXXXXXXXXXX[COLOR="Green"]XX[/COLOR]

XXXXXXXXXXXXXXXXX[COLOR="Green"]XX[/COLOR]

[COLOR="MediumTurquoise"]XX[/COLOR][COLOR="Purple"]XXXXXXXXXXXXXXX[/COLOR][COLOR="Red"]XX[/COLOR][/COLOR]



[COLOR="Magenta"]Main content: width, height, left, top set in CSS[/COLOR]

[COLOR="Blue"]Top drop shadow: width about 10, left = main content with + main content left, top = main content top[/COLOR]

[COLOR="Green"]Right dropshadow: left = Top drop shadow left,

top = Top drop shadow top + Top drop shadow height[/COLOR]

[COLOR="MediumTurquoise"]left dropshadow: left = main content left, top = main content top + maincontent height[/COLOR]

[COLOR="Purple"]bottom dropshadow: height = main content height + main content top

left = left dropshadow left + left dropshadow width

width = main content width - (left dropshadow width + right shadow width)

[/COLOR]

[COLOR="Red"]bottom right dropshadow:

top = maincontent top + main content height

left = main content left + main content width

[/COLOR]
Copy linkTweet thisAlerts:
@joseph_liuauthorSep 12.2007 — Thanks for the tips guys....

I will avoid these frick'in shadows in the future.

?

Joseph
Copy linkTweet thisAlerts:
@WebJoelSep 12.2007 — I think cssplay.uk has some nice examples. That is probably where I got this derivative from:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>My project</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link media="screen" type="text/css" rel="stylesheet" href="webtoolkit.shadow.css" />

<style>
body {margin: 0px;padding: 20px; font-family: verdana; font-size: 12px;}

#shadow-container {position: relative; left: 7px; top: 7px; margin-right: 6px; margin-bottom: 6px;}

#shadow-container .shadow1 {background: #F1F0F1;}

#shadow-container .shadow2 {background: #dbdadb; position: relative; left: -3px;top: -3px;}

#shadow-container .container {background: #fff;border: 1px solid #848284; position: relative; left: -4px; top: -4px; padding: 10px;}

/* CSS drop shadow */

</style>

</head>

<body>

<div id="shadow-container">

<div class="shadow1">

<div class="shadow2">

<div class="container">

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>

</div>

</div>

</div>

<br />

<div id="shadow-container">

<div class="shadow1">

<div class="shadow2">

<div class="container">

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>

</div>

</div>

</div>

</body>

</html>[/QUOTE]
×

Success!

Help @joseph_liu 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.20,
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,
)...