1

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:

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?

  • I had to go for the PNG background version... – oskarlin Aug 13 '12 at 7:29
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'}));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.