Forum Moderators: open

Message Too Old, No Replies

How To Make Drop Shadows On DIV Elements Without Using Image?

         

thedealmaker

1:46 am on Sep 15, 2005 (gmt 0)

10+ Year Member



Hi,
I am looking for a way to make drop shadows on div elements without using image. Does anyone know how?
Many thanks.

birdbrain

9:57 am on Sep 15, 2005 (gmt 0)



Hi there thedealmaker,

have a look at this, it may provide you with some ideas...


<!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">
<head>
<title>drop shadow layout</title>
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
background-color:#fff;
}
#container {
width:760px;
position:absolute;
top:50px;
left:50px;
}
#shadow {
width:752px;
height:360px;
position:absolute;
top:6px;
left:6px;
background-color: #ccc;
border:solid 2px #ddd;
}
#contents {
width:752px;
height:360px;
position:absolute;
top:0px;
background-color:#ffe;
border:solid 1px #999;
}
#contents p {
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
color:#333;
text-align:justify;
margin:20px 20px 10px 20px;
}
/*//]]>*/
</style>
</head>
<body>
<div id="container">
<div id="shadow"></div>
<div id="contents">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus.
Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti.
Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a,
nunc. Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt
turpis. Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a,
accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing,
est orci adipiscing felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed
cursus feugiat mauris. Aenean pharetra purus a augue varius gravida. Aliquam gravida nibh ut nunc.
Integer tortor risus, posuere eget, rutrum non, semper a, tellus. Phasellus faucibus, elit nec egestas
adipiscing, sapien sapien lacinia nulla, et bibendum metus neque fermentum sapien. Etiam ante dui,
tincidunt ac, auctor eu, aliquet non, velit. Mauris enim libero, malesuada at, dignissim vitae, lobortis ut,
enim. Sed porttitor consequat eros. Morbi nec risus vitae diam sodales accumsan. Praesent ultrices
magna sit amet enim. Proin convallis ipsum non dolor. Donec eu tellus. Nam ut magna.
</p>
</div>
</div>
</body>
</html>

birdbrain