css3files.com

When I recently created a new element for an iPhone App I came across a common problem. The goal was to add an inset shadow that covers the whole element including the containing image which touches the outer edges. Therefore I couldn’t apply it to the element itself but had to make an overlay using a pseudo-element. Unfortunately this topmost layer covered not only the element but also its underlying linking resulting in an unclickable element.

First I didn’t exactly know what to do and experimented with the z-index of the involved layers, which didn’t result in the desired outcome. But then I remembered a not so well known CSS property called pointer-events. When set to none it enables to make elements “translucent” for mouse events (i.e. a click), which then are passed through to the underlying content. The perfect property to solve my problem!

The default value for pointer-events is auto, that means it reacts to a mouse event as usual, which also correspondents to the standard behavior of any HTML element. The support is pretty good and besides the usual suspects – namely the IE family – only Opera isn’t capable of it. But since I was lucky enough to develop for an iPhone App I didn’t have to worry.

In the following I’ve provided an example to illustrate the behavior.

Reference: Image by lorempixel, overlay pattern by Subtle Patterns.