CSS 4? Really? CSS 3 isn't fully released yet! What on earth is going on here?
It all started when I was fooling around with GIMP,
the extremely powerful free graphics editor. I took a public domain
image, re-sized it, gave it a transparent background and then added a
perspective shadow.
It is beautiful.
I wanted to see the image in "action" so I put it on a web page. But
because of the way HTML elements are rendered, there was nothing behind
my gorgeous image to demonstrate the transparency. I could have used a
background color but instead I gave the image an absolute position and
positioned it over a button:
It looks 3-dimensional but you can't click on the button with the
mouse. The transparent part of the image is like having a sheet of
glass over the button. You can tab to it and use the space bar but it's
really not useable as it is.
I recalled reading about the CSS pointer-events property. I assigned it to the image and voila! It worked…at least on FireFox. IE hasn't implemented this feature yet.
Here is a jsFiddle that shows it in action. If your browser supports pointer-events, you will be able to click the button: