Inner shadow of a OpenLayers map container?

Question

Not sure if this question should be here in the GIS section or if I should move over to a more common html/css place, but here we go:

I'd like to have an inner shadow of my OpenLayers map canvas so that it looks like that the map is underneath the rest of the web page. Example:

The square pattern is where the map will be later. Ideal would be to just use

box-shadow: inset 0 0 5px 5px black;

but the map tiles will be displayed on top of the frame which makes the shadow disappear.

Any ideas how to achieve this only with CSS? I really don't want to use lots of divs with PNG files as backgrounds, but I guess I have to?

Answer 1

I had the same question and found example code uploaded to github by Frédéric Junod:

https://github.com/fredj/sandbox/tree/master/openlayers/shadow

The key parts of it are the following CSS and JS.

.boxShadow {
  box-shadow: inset 3px 3px 5px #888;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

map.addControl(new OpenLayers.Control({displayClass: 'boxShadow'}));