Page 2 of 2 FirstFirst 12
Results 11 to 18 of 18

Thread: [CSS] Multi-purpose Drop Shadow Border

  1. #11
    Join Date
    Oct 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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 !!

  2. #12
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #13
    Join Date
    Oct 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default [CSS] Multi-purpose Drop Shadow Border

    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:
    Attachment 1353

  4. #14
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #15
    Join Date
    Oct 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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...!

  6. #16
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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.

    Code:
    <!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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #17
    Join Date
    Oct 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  8. #18
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by wattersisere View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •