Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: [CSS] Multi-purpose Drop Shadow Border

  1. #1
    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 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/

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,000
    Thanks
    44
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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:

    Attachment 1348
    Last edited by jscheuer1; 10-14-2007 at 05:38 PM. Reason: attach images
    - John
    ________________________

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

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,000
    Thanks
    44
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Two other things I just noticed:

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

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

  4. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    Wouldn't .pngs make more sense, so that you can have it over some other element, rather than it needing to be over white?
    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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,000
    Thanks
    44
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

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

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

  6. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,000
    Thanks
    44
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

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

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

  8. #8
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    Do pngs not work in IE6? I thought they just had transparency issues if the workaround wasn't used.
    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

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,000
    Thanks
    44
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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.

    Attachment 1349
    - John
    ________________________

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

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,000
    Thanks
    44
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!--[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.
    - 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
  •