Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Add inset box-shadow on Google Maps element

Add inset box-shadow on Google Maps element

Problem

I am willing to add some Inset box-shadow to a tag that is containing a Google Maps Element. However, it seems nothing happens, probably because Google loads some other div's in the original element, hence covering the generated box-shadow.

How can I achieve this effect?

Here's the code I have:

#map-container { position: relative; float: right; width: 700px; background-color: #F9FAFC; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } #map { position: relative; height: 400px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 0 1px 0 0 #F6F7FB inset, 0 -1px 0 0 #E0E5E1 inset, 0 -2px 0 0 #EBEBED inset, 0 -3px 0 0 #F4F4F6 inset; }

Thank you!

Problem courtesy of: linkyndy

Solution

Figured it out. Here the working CSS:

#map-container  {
    position: relative;
    float: right;
    width: 700px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 0 0 #F6F7FB inset, 0 -1px 0 0 #E0E5E1 inset, 0 -2px 0 0 #EBEBED inset, 0 -3px 0 0 #F4F4F6 inset;
}

#map    {
    position: relative;
    height: 400px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: -1
}
Solution courtesy of: linkyndy

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Add inset box-shadow on Google Maps element

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×