...

View Full Version : css - shadow page outline border



adolph0034
04-09-2009, 11:17 PM
hello friends, I need want to add a shadow backdrop to my outside border..using <div> or if there is a more efficent way to implement it..

The effect I want to give off is displayed at the following site:

http://www.lawoftime.org/home.html

Thank you in advance for your time. Peace and Prosperity.

Adolph

Excavator
04-09-2009, 11:36 PM
Hello adolph0034,
That site you link to does the shadow with left and right border jpegs but it's using tables for layout. See the link in my sig about tables.

It could very easily be done by nesting divs - one to hold the right shadow, one to hold the left shadow and a third to contain the site.

It could also be done even easier with a little photoshop work as a single image repeated on the y axis.

Excavator
04-09-2009, 11:42 PM
Here's an example using the nested divs -
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
outline: none;
border: none;
}
#outer1 {
width: 856px;
margin: 0 auto;
background: url(http://www.lawoftime.org/graphics/left-border.jpg) repeat-y;
}
#outer2 {
width: 856px;
background: url(http://www.lawoftime.org/graphics/right-border.jpg) repeat-y right;
}
#container {
width: 800px;
height: 600px;
margin: 0 auto;
background: #999;
}
</style>
</head>
<body>
<div id="outer1">
<div id="outer2">
<div id="container">
<!--end container--></div>
<!--end outer2--></div>
<!--end outer1--></div>
</body>
</html>

adolph0034
04-10-2009, 12:52 AM
Thanks for your help Excavator. For faster loading time (overall efficiency), which solution would you implement, given your experience.

Adolph

TinyScript
04-10-2009, 01:02 AM
Here's a script I found yesterday. The site is down today and I can't find the source, but I made a bunch of changes.



<!doctype html public '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=utf-8">
<title>Yahoo!</title>

<link rel="stylesheet" type="text/css" href="xxx.css" />


<style>



.mod
{
left:30%;
top:10%;
position:absolute;
}

.bd
{
height:100%;
width:15em;
}
.ft
{
position:absolute;
width:100%;
left:0px;
top:0px;
background:#666666;
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=6);
height:100%;
height:expression(this.parentNode.offsetHeight + 'px');
z-index:1;
}
.ft[class]:not(span)
{
height:101%;
width:101%;
left:1px;
top:1px;
opacity:0.5;
border-right:solid 2px #999999;
border-bottom:solid 2px #999999;
-moz-border-radius:6px;
border-radius:6px;
}



.content
{
position:relative;
z-index:2;
padding:12px;
font-size:72%;
font-family:Arial;
background:white;
-moz-border-radius:6px;
border:solid 1px #666666;
border-right-color:#222222;
border-bottom-color:#222222;
}


</style>

</head>
<body>


<div class="mod">

<div class="bd">


<div class="content">
ontrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
</div>


</div>
<div class="ft"></div>
</div>


</body>
</html>



here the google cache of the script that I saved. You'll have to pick out the google droppings.
http://h1.ripway.com/stirfry/css/tests/css-fuzzy-shadow.html

here's my test
http://h1.ripway.com/stirfry/css/tests/fuzzyModule.html

adolph0034
04-10-2009, 01:12 AM
Thanks a bunch, your the man. This is enough for me to put something together. I will keep you posted.

Excavator
04-10-2009, 01:39 AM
Thanks for your help Excavator. For faster loading time (overall efficiency), which solution would you implement, given your experience.

Adolph

Depends on what you want. Hard to say without seeing your images. If you don't want to use images at all, have a look at this - http://nopeople.com/CSS/drop_shadow/index.html

adolph0034
04-13-2009, 07:16 PM
Resolved thanks to excavator!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum