In my own terminology, I would classify a solid and opaque “border” separately from a “shadow” gradient. But perhaps you really don’t know what you want, in such a case I can comment about “page shadow.” You can view how I’ve implemented page shadow on my Japanese site here:
If you view the HTML source of my page, you will see that most of the page contents are child items of the layered HTML box (DIV) “outerShadow”. That HTML box is the same dimensions as the page itself. The only two items that lie outside outerShadow are: (1) a 950 x 60px layered HTML box spacer, sitting in the pasteboard above the page, that gets positioned between the very bottom of the page and the bottom of the browser window via Paul Dunning’s MakeMeAFooter Action, and (2) the splash screen that you initially see the first time the page opens. You can download Paul’s Action here:
http://www.actionsworld.com/Actions/MakeFooter/index.php
Here’s the Page Shadow code I added via Page HTML Markup, Before :
<style type="text/css">
<!--
#outerShadow {
-moz-box-shadow: 0 29px 24px 2px #000;
-webkit-box-shadow: 0 29px 24px 2px #000;
box-shadow: 0 29px 24px 2px #000;
behavior: url("/PIE.htc");
}
-->
</style>
I downloaded the PIE.htc file and put it in the root level of my webserver to act as fallback for IE6/7/8. You can learn more about that here:
http://css3pie.com/documentation/getting-started/
What makes my shadow implementation unique is that I have it vertically offset. I did that on purpose because (1) it looks better to my eyes than a non-offset shadow on all 4 corners, and (2) because I’ve not seen anyone else do it (I dare to be different).
Offsetting the shadow vertically though makes it overshoot the footer in a way that I don’t like. I want the shadow width (from the edge of the page to the end of the shadow) to be the same for the left side, right side and bottom sides of the page. To fix the page bottom, I put the following code in Page HTML Markup, Before :
<script>
var outer=document.getElementById("outerShadow");
var inner=document.getElementById("PageDiv");
if (PageDiv && outerShadow){
outerShadow.style.height = (parseInt(outerShadow.offsetHeight) -28) + "px";
}
</script>
The other Page Shadow caveat comes when you want to design pages using the RPL Action. I’ve extensively discussed that, with a solution here:
http://freewaytalk.net/thread/view/126417#latest
The only unaddressed issue is when you want to put my page shadow on an RPL page that is in turn hosted on a server other than yours AND you also want fallback for IE6/7/8. If you ditch the fallback, there are no issues. But if you want fallback, there is not a solution YET. That’s because you cannot use the PIE.htc implementation because you normally don’t have rights to upload that file to servers owned by other people (e.g., Atomz Search). So to solve that would require use of PIE.js, but I’ve never been able to figure that one out.
Hope this helps,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options