Menu
I'm interested in putting an inset box shadow on something like an iframe. While the strategy of overlaying a div over the iframe gives the expected visual display, the div subsequently blocks clicks on the iframe itself.
Sample: http://jsfiddle.net/YqXPg/
So is there a way to pull off the inset shadow as a "framing" effect?
720
You can solve this problem using the “none” value of the CSS pointer-events property. In the case of using this value, the element will not react to the pointer-events. With the help of the CSS background property put your transparent background.
First, we create a <div> element (class="background") with a background image, and a border. Then we create another <div> (class="transbox") inside the first <div>. The <div class="transbox"> have a background color, and a border - the div is transparent.
To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie. invisible).
Yes, there's pointer-events: none.
See: http://jsfiddle.net/YqXPg/3/
A version that makes the overlay more obvious: http://jsfiddle.net/YqXPg/4/
Note that this property doesn't work with IE, but if I remember correctly, IE will allow you to click through the transparent parts of the overlay div anyway.
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
