mark
M&S Wine Gums FTW
- Joined
- Jun 6, 2001
- Messages
- 5,093
i know you can add them to images, but anybody here ever add a drop shadow to a container div?
-
Welcome, guest!
Why not take a moment to register an account?
If you already have an account, remember to Log In!
CSS drop shadows (1 Viewer)
- Thread starter mark
- Start date
- Replies 7
- Views 1K
- Watchers 1
plug
Well-Known Member
you could simulate it pretty easily by wrapping your div inside two or three external divs and give each external div a border bottom style, each border style colour increasing in lightness...
it's probably not a very elegant solution though.
could you create a css class to tile a gradient image along the bottom of the div?
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<style type="text/css" title="stylesheet" media="screen">
/* <![CDATA[ */
div
{
overflow: hidden;
}
p
{
padding: 10px;
}
.container
{
border: 1px solid #bbb;
}
.ds01
{
border-bottom: 1px solid #ccc;
}
.ds02
{
border-bottom: 1px solid #ddd;
}
.ds03
{
border-bottom: 2px solid #eee;
}
/* ]]> */
</style>
</head>
<body>
<div class="ds03">
<div class="ds02">
<div class="ds01">
<div class="container">
<p>why hello there</p>
</div>
</div>
</div>
</div>
</body>
</html>it's probably not a very elegant solution though.
could you create a css class to tile a gradient image along the bottom of the div?
Goodbye
New Member
- Joined
- Sep 8, 2001
- Messages
- 15,290
or you could just click on the drop shadow option
Wavioli
Well-Known Member
the way i usually do it is by having a transparent png tiled down the body of the container for the side shadow, and then another on the footer, or add another div inside the container if needed. Obviously you'll have to use the transparent png fix for IE6
like this:
or something like that. YOu might want to change the position of the container bottom div depending on how your layout is set up.
like this:
Code:
<div id="container">
<div id="container-bottom">
</div>
</div><!--container-->or something like that. YOu might want to change the position of the container bottom div depending on how your layout is set up.
Goodbye
New Member
- Joined
- Sep 8, 2001
- Messages
- 15,290
I prefer my way
simp
New Member
- Joined
- Jan 22, 2002
- Messages
- 510
Drop shadows make the baby Jesus cry.
plug
Well-Known Member
you've probably seen this already but anyway:
http://www.alistapart.com/articles/cssdropshadows/
it's mainly about image drop shadows but there's a bit at the end explaining how to use the technique for divs. or any block level element I'd imagine...
http://www.alistapart.com/articles/cssdropshadows/
it's mainly about image drop shadows but there's a bit at the end explaining how to use the technique for divs. or any block level element I'd imagine...
plug
Well-Known Member
Users who are viewing this thread
Activity
So far there's no one here
21 Day Calendar
Similar threads
Support thumped.com
Support thumped.com and upgrade your account
Upgrade your account now to disable all ads...
Upgrade now
