www.webdeveloper.com
Results 1 to 3 of 3

Thread: Image based shadow vs CSS3 shadow issue

  1. #1
    Join Date
    Aug 2007
    Location
    London
    Posts
    410

    Question Image based shadow vs CSS3 shadow issue

    Hi all,

    On my site I have a "top menu" which has a shadow dropped on to the site from below. The shadow is 50px long overall. This puts my in a spot of bother, however, because it means that anything that is overshadowed cannot be clicked on, the layer above gets in the way.

    To solve this dilemma I tried to use CSS3's box-shadow property and successfully duplicated the effect, but found that the performance penalty was so high that all the Javascript effects because very jumpy. I've decided that the slowdown was too great a side-effect and have thus reverted to an image based shadow.

    My question is this: short of using the box-shadow CSS property, is there a way that I can have items in the shadow but have them clickable (essentially locking the upper layer to clicks) or do I just have to move it out of the way of the shadow?

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Not without using JavaScript, but that would make the links unaccessible to some users.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Aug 2007
    Location
    London
    Posts
    410
    I'm not sure that recording the events on the upper layer will work simply because there are text fields as well as checkboxes etc. and it's not a terribly ideal solution.

    About inaccessibility, as far as the site I'm developing goes, I'm not terribly interested in supporting people who aren't using javascript and/or a modern browser using Webkit or Gecko or something other that's reasonable (id erat: I don't care about IE users).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles