Rss Feed Like Us on facebook Google Plus

February 28, 2012

Cool CSS4 Feature

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: 

© 2011-2016 Techimpulsion All Rights Reserved.

The content is copyrighted to Tech Impulsion and may not be reproduced on other websites.