Results 1 to 4 of 4

Thread: [CSS] Drop Shadow - Strict Validation

  1. #1
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default [CSS] Drop Shadow - Strict Validation

    1) CODE TITLE: CSS Drop Shadow - Strict Validation

    2) AUTHOR NAME/NOTES: John Davenport Scheuer (jscheuer1)

    3) DESCRIPTION: The styles are reusable and tweak-able. The HTML markup is repeatable. You can have multiple and/or differently styled drop shadow areas on a page or pages. Uses 5 8x8 Alpha channel PNG images for a light byte load and true shadow effect. You can partially see through them! They go well over any lighter colored background(s).

    4) URL TO CODE: http://home.comcast.net/~jscheuer1/side/drop_shadow/
    - John
    ________________________

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

  2. #2
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Ouch... tables. No divs used?
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    As far as I know, using multiple nested divisions for something like this requires a fixed unit width dimension, which (counter-intuitively) cuts down on a designer's ability to create a fluid page. In any case, the biggest drawback of a table is that it can slow down the rendering of a page. Using the valid:

    table-layout:fixed;

    css property value pair takes care of that by allowing the browser to render the table as quickly as it could render multiple divisions. No nested tables (the other big no-no for tables and rendering speed) are used. With the table-layout:fixed; style though, this table should be able to be nested without taking a rendering speed hit.
    Last edited by jscheuer1; 10-26-2007 at 08:58 AM.
    - John
    ________________________

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

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Your demo pages are getting snazzier John

    I actually prefer the Javascript solutions for this sort of thing. It's not vital for the user to be able to render it, after all, and using Javascript does remove a lot of the extra markup and keep the code nice and neat. I feel that no shadows for non-JS users is an acceptable sacrifice.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

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
  •