PDA

View Full Version : [CSS] Multi-purpose Drop Shadow Border



wattersisere
10-14-2007, 02:13 PM
1) CODE TITLE: Multi-purpose Drop Shadow Border

2) AUTHOR NAME/NOTES: Wattersisere

3) DESCRIPTION: A CSS script to add a bottom and right drop down shadow to a box. This box's width needs to be in-putted into the CSS, but the height can vary from one page to the next. It uses 5 images, all of which are 8px by 8px (2 of these though could be changed to 1px by 8px). It is ideal to add a shadow to the main content area of a web page. It also includes the clearfix class method to help with the floated elements.

4) URL TO CODE: http://www.wattersisere.co.uk/web/drop-shadow/

jscheuer1
10-14-2007, 03:48 PM
Looks nice. I could be wrong, but the effect should be easier to achieve. In any case, don't use .bmp for this. For example, your b_shadow.bmp is 246 bytes. An identical .gif image can be had at 73 bytes.

Now, I know that you could also further reduce the byte size by making it narrower (as you imply). But, from my experience, this often can increase the rendering time required due to some quirk in at least some browsers.

Here are all of the images in .gif format:

1348

jscheuer1
10-14-2007, 06:01 PM
Two other things I just noticed:



body {font:1em verdana, arial, sans-serif; behavior:url(csshover.htc);}

font-size 1em is basically meaningless, especially for the body selector. It can even cause problems in IE if other font-size declarations are made in em's for other selectors. If you must declare it, it is safe to use 100% which means the same thing.

csshover.htc is a file not found 404 error. The behavior property is IE proprietary and requires Active X components enabled. It will therefore pop a security warning for most users testing locally in IE. Best to avoid this if possible. Since the csshover.htc is missing, it can't be that important, right? I'm thinking that declaration was left over from a previous version.

djr33
10-14-2007, 11:16 PM
Wouldn't .pngs make more sense, so that you can have it over some other element, rather than it needing to be over white?

jscheuer1
10-15-2007, 03:30 AM
Wouldn't .pngs make more sense, so that you can have it over some other element, rather than it needing to be over white?

I think that .png could be fairly problematical in IE 6, and 5.5. It could be worked out, but would really bloat things up. And .png images would be slightly larger for this, and perhaps completely unsupported in some legacy (IE 5 Mac for one) browsers while this is obviously designed to include as many old as well as new browsers as possible. You can always make your own colored .gif corners.

I've used a rounded corners css thing for awhile. It uses single layer transparency and one color matching. These are really easy to change for different backgrounds as it is a one color palette edit. For these, it would be a bit more work.

djr33
10-15-2007, 03:41 AM
Trouble is that a shadow must be projected onto something, not just displayed around it. It's much more fundamental than a rounded corner which is just a nice bonus, where the shadow having white edges would have a significant bad effect on the page around it.

Using PNGs would perhaps cause trouble in that their transparency would not be supported, but it would be no worse than the current .bmp, or gif methods.

I'm not sure about IE 5 for mac, but that's really getting phased out now. New macs aren't shipping with it any more and almost everyone is moving toward Firefox or at least Safari.

IE 5 for mac was a big browser for OS9, but replaced slowly by Safari on OSX and I don't even have it on here (macbook pro).

jscheuer1
10-15-2007, 03:54 AM
Using PNGs would perhaps cause trouble in that their transparency would not be supported, but it would be no worse than the current .bmp, or gif methods.

Much worse, actually. It is the difference between needing to tweak the images in an editor (.gif method) and having it not work at all (.png method). Bmp's are out of the question in my opinion - rarely suitable for any web publishing project.

.png template images would be very useful as an aid for easily creating .gif images that could show in front of any color background.

djr33
10-15-2007, 04:09 AM
Do pngs not work in IE6? I thought they just had transparency issues if the workaround wasn't used.

jscheuer1
10-15-2007, 06:26 AM
Well, I got bored, so I made up some .png images for it. I'm personally not attached to it working in IE Mac. However, even in IE 5.5 and 6, using the background image model is probably not going to work out too well. You need to use the alpha image loader filter. It might work out though, experimenting with that will probably have to wait for another time, at least for me.

1349

jscheuer1
10-15-2007, 07:41 AM
I recalled a much easier way to make it 'retroactive' to IE 5.5 & 6 PC. The filter:shadow -

Just add this in after the main style block:


<!--[if lt IE 7]>
<![if gte IE 5.5]>
<style type="text/css">
#br_shadow, #b_shadow, #tr_shadow, #bl_shadow, #r_shadow {
background-image:none;
}
#inside {
filter:progid:DXImageTransform.Microsoft.Shadow(strength=7,color=#636363,direction=135);
position:relative;
}
</style>
<![endif]>
<![endif]-->

Filters screw up text in IE 7, so I'm excluding it from this. IE 7 handles the .png alpha channel opacity just fine.

BTW, the demo page from the original post in this thread didn't work in IE 6 anyway, even with the BMP's and wattersisere's original css. The alignment of the images was off. Now it will, using the filter:shadow and a background color for text in the #inside division.

wattersisere
10-15-2007, 04:07 PM
Thanks guys!

I'd just created it for a box on a white background and I really should have checked these things (I usually do).

The behaviour file and 1em in the top line of the CSS are there from the full page, I forgot to take them out. They can be removed.

I used bmp images because I created the images from a large png and then just quickly split it up in Paint, and saved as .bmps automatically. I would usually use .gifs for the image as it is on a white background.

I agree that using .png images would be better for most people, as it would allow it to work on any background, but it needs the extra line of code for IE6, and I don't know if they work in older browsers (I can't check).

A big thanks to "jscheuer1" for the workaround using filters.

In response to one point that .bmp are not great at all for web design, I slightly disagree (I know, though, that I was wrong to use them in this instance). For complex gradients, .gifs sometimes cannot handle the colours that are used and a 1px thick bitmap does the job perfectly.

I'll take your advice and submit a new and improved version.

Thanks !!

djr33
10-15-2007, 06:38 PM
png is full quality and losslessly compressed, so it is always better than bmp.
jpg is usually better than png, unless you REALLY need full quality, or alpha transparency.

bmp seems to work in most browsers, but from what I can tell it isn't even really supposed/expected to be supported.

bmp is a direct representation of each pixel and therefore always bulky. using png will never hurt. (well, with older browsers it could be weird, but bmps aren't meant to be supported anyway, so it can get weird there, too).


gif is good in cases where there aren't too many colors-- gradients are an example where you would rarely want to use gifs. easily more than 256 colors in a typical gradient.

wattersisere
10-18-2007, 04:21 PM
1) CODE TITLE: Multi-purpose Drop Shadow Border

2) AUTHOR NAME/NOTES: Wattersisere

3) DESCRIPTION: A CSS script to add a bottom and right drop down shadow to a box. This box's width needs to be in-putted into the CSS, but the height can vary from one page to the next. It uses 5 .png images and a filter for IE 5.5 and 6. It is ideal to add a shadow to the main content area of a web page. It also includes the .clearfix class method to help with the floated elements.

4) URL TO CODE: http://www.wattersisere.co.uk/dev-shed/

The attachment is a .zip folder containing the 6 files:
1353

jscheuer1
10-18-2007, 05:49 PM
I'm curious about this width issue. I am assuming that if one wants to vary the width, one would need to change a lot of numbers in the css. Is that right? I'm thinking at least these (red):


<style type="text/css">

* {margin:0; padding:0;}

#container {width:800px; margin:20px auto;}

#inside {width:778px; border:1px solid #606060; float:left; background-color:#FFF;}

#br_shadow {width:788px; background:#FFF url("br_shadow.png") no-repeat top right;}

#b_shadow {width:772px; height:8px; background:#FFF url("b_shadow.png") repeat-x; float:left;}

#tr_shadow {width:8px; height:8px; background:#FFF url("tr_shadow.png") no-repeat top right; float:left; }

#bl_shadow {width:8px; height:8px; background:#FFF url("bl_shadow.png") no-repeat top left; float:left; }

#r_shadow {width:788px; background:#FFF url("r_shadow.png") 780px 8px repeat-y;}

.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

</style>

Now the formula or relationship between these must in most cases be exact, right? I think it would be helpful to document the math/logic, even if it is only simple addition and subtraction.

I'm particularly interested in the relationship between #inside's and #br_shadow's widths. A 10px difference doesn't appear to correspond to anything dictated by the size of anything else, but I may be missing something, or this relationship may not be one that needs to be exact.

I think it should be explained for others that, and in what way widths, heights, and differences of 8px, and multiples thereof are in most cases derived from the actual width and height of the shadow images. If different sized images are used, these values would also need to be adjusted for that.

wattersisere
10-18-2007, 06:12 PM
You're right, and I designed it like that to fit on a 600 by 800 screen. The missing 10px is missing, no maths error on you're part.

I might try something with relative positioning sp that you only have to change one width value for the container.

That's my weekend sorted...!

jscheuer1
10-18-2007, 06:57 PM
Well, I have designed a sister implementation for this that uses a table (still validates as strict, though). It has only one minor drawback in that it currently requires one use of the proprietary css expression property for IE 7 to get the height of one of the cells to come out right in that browser. This of course requires javascript enabled, as does the filter workaround for older IE browsers that we already have on your version, and that I am still using for those browsers. I take these (javascript enabled) requirements for IE browsers as not too serious, but wonderful if they could be avoided.

On the plus side, with the table you can adjust the width in just one place in my setup and the rest will just all fall into line. You can even use percentage or em units for the width.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.shadow_box {
width:60%; /* All you need to adjust in most cases */
margin:20px auto;
table-layout:fixed;
border-collapse:collapse;
border:none;
}
.shadow_box td {
padding:0;
margin:0;
}
.l_top, .r_top {
width:8px;
height:1px;
}
.top {
height:1px;
}
.tr_side {
width:8px;
height:8px;
background-image:url(tr_shadow.png);
}
.r_side {
width:8px;
background-image:url(r_shadow.png);
}
.l_bot {
width:8px;
height:8px;
background-image:url(bl_shadow.png);
}
.bot {
height:8px;
background-image:url(b_shadow.png);
}
.r_bot {
width:8px;
height:8px;
background-image:url(br_shadow.png);
}
.content {
vertical-align:bottom;
}
#content_1 {
background-color:#add8e6;
padding:1.5ex;
text-indent:1.5em;
border:1px solid gray;
margin:0;
}
</style>
<!--[if gte IE 7]>
<style type="text/css">
#ie_side_1 {
height:expression(document.getElementById('content_1').offsetHeight-8+'px');
}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css">
.shadow_box {
filter:progid:DXImageTransform.Microsoft.Shadow(strength=7,color=#636363,direction=135);
position:relative;
}
.tr_side, .r_side, .l_bot, .bot, .r_bot {
background-image:none;
}
</style>
<![endif]-->
</head>
<body>
<!--[if lt IE 6]>
<center>
<![endif]-->
<table class="shadow_box">
<tr><td class="l_top"></td><td class="top"></td><td class="r_top"></td></tr>
<tr><td class="content" colspan="2" rowspan="2"><div id="content_1">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum non tellus nec justo suscipit tincidunt. Cras a eros sed metus pretium posuere. Fusce auctor, nulla in semper ullamcorper, mi lorem ullamcorper augue, ac nonummy nisl leo ut lorem. Morbi ut ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sed nunc eu turpis consectetuer aliquam. Proin a magna. Cras eu tortor. Praesent mi arcu, interdum vel, venenatis placerat, eleifend eget, mauris. Fusce commodo. In vehicula vulputate augue. Sed ac nulla a turpis adipiscing viverra. Fusce sit amet pede a arcu fermentum nonummy. Vestibulum quis magna et turpis eleifend bibendum. Aliquam dapibus. Integer porttitor, tellus at convallis rhoncus, tortor dolor volutpat eros, vel fermentum tortor augue ac neque. Pellentesque nunc turpis, adipiscing sit amet, venenatis quis, tempus a, enim. Etiam vitae augue. Praesent ante elit, cursus vel, mollis in, sollicitudin at, ipsum.

</div></td><td class="tr_side"></td></tr><tr><td class="r_side" id="ie_side_1">&nbsp;</td></tr>
<tr><td class="l_bot"></td><td class="bot"></td><td class="r_bot"></td></tr>
</table></body></html>

I've switched to using classes as well, to allow multiple drop shadows on a page. Each one on a given page would require two uniquely id'ed elements, as shown in the above to get the IE 7 kludge for the one td's height that I mentioned to work out individually for each implementation.

wattersisere
10-19-2007, 04:48 PM
Well done Jscheuer1, that really is great.

A quick side note: it truly is people like yourself who drive these online communities and make them so beneficial! Thanks.

I recommend that you submit that as your code, since you've really done all the modifications on it.

I'm going to try and use just css, rather than tables, as a personal challenge. Early last night I realised that tables were the better option, but I do enjoy a good challenge!

jscheuer1
10-20-2007, 04:21 PM
Well done Jscheuer1, that really is great.

I recommend that you submit that as your code, since you've really done all the modifications on it.

Thanks, and I may well take you up on that. I will want to document my work more fully first. For the time being I have solved my problem of requiring javascript for IE - sort of. The way it breaks down now is that IE 7 requires and uses no javascript, avoiding that local 'Active X' warning. 6 back to and including 5.5 do, but only if they want to render the shadow, they will degrade to an ordinary box if running without javascript enabled. Before that, who knows? All other modern browsers are non-javascript, period.

I've got a live demo:

http://home.comcast.net/~jscheuer1/side/drop_shadow/

I've also eliminated the need for any id's. The style is all done with classes now, making it very modular.