Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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?

share|improve this question
    
I had to go for the PNG background version... –  Oskar Karlin Aug 13 '12 at 7:29
add comment

1 Answer 1

up vote 0 down vote accepted

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'}));
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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