Inset Box Shadow on iFrame (Google Calendar)

Question

I am trying to put an Inset Box Shadow on a Google Calender and cannot seem to get it to show up unless the z-index is a negative. It shows, but then the user cannot click/use the calendar. I looked at: Add inset box-shadow on Google Maps element but it has the z-index set to a negative. I put everything in-line until I figure everything out.

<div style="box-shadow:inset 0 0 10px #000000; 
            -moz-box-shadow:inset 0 0 10px #000000; width: 900px;">

   <iframe src="https://www.google.com/calendar/embed?showTz=0&amp;height=600&amp;wkst=1&amp;bgcolor=%23ccffff&amp;src=756r34h4d6aqhta6fmaqkijm9k%40group.calendar. google.com&amp;color=%23853104&amp;ctz=America%2FNew_York" style="border-width:0" width="900" height="600" scrolling="no"></iframe>
</div>

I can see the shadow popping in behind it. I have tried double wrapping, putting the style in the iframe ect and cannot get it to work for the life of me.

score -2 · Answer 1 · answered May 20 '13 at 00:49

-2

Need to use relative positioning and z-index property.

Try it out, good luck!

.the-div {
    position: relative;
    box-shadow: inset 0 0 10px #000;
}

.the-iframe {
    position: relative;
    z-index: -1;
}

Put it as you wish... inline CSS or external but use the code above for the respectful elements

answered May 20 '13 at 00:49

Santiago Baigorria

700
1
6
15

z-index of -1 hides the iframe – NullVoxPopuli Jun 20 '13 at 16:15
Right. Unfortunately, this is the only way.- Sorry! – Santiago Baigorria Jun 23 '13 at 00:49
so then.. this doesn't work? cause the iframe is hidden? can you make a JSFiddle proving this works? – NullVoxPopuli Jun 23 '13 at 21:26
I'll explain. The iFrame is not hidden. It's under the div, SO the effect is achieved, BUT mouse events won't work. You don't need a JSFiddle for this, and if you want it do it yourself – Santiago Baigorria Jun 24 '13 at 15:21
1

Everyone appreciates a fiddle. Especially if, when implemented in a complex website, it doesn't work right away. Having an isolated environment to prove that a technique works is helpful for everyone. – NullVoxPopuli Jun 24 '13 at 15:23
No need pal!! I'm telling you what happens. Works equally for all major browsers – Santiago Baigorria Jun 24 '13 at 17:32

Inset Box Shadow on iFrame (Google Calendar)

1 Answers1