HTML/CSS: How does Google create this drop shadow over their maps?

后端 未结 4 1431
盖世英雄少女心
盖世英雄少女心 2021-01-05 20:31

Question: How does Google create the dropshadow next to the vertical scrollbar over the Google Map?

This is a screenshot depicting exactly what I\'m

相关标签:
4条回答
  • 2021-01-05 21:03

    Chances are it's -webkit-box-shadow or -moz-box-shadow, depending on your browser.

    EDIT I just checked the page, and it's a series of <div> aligned together. Look for <div id="ds-v"> in the page source (or in some kind of DOM inspector, as that would be easier). It's most likely some kind of hack they've put together to get a cool effect, but I don't know how easily reproducible this is.

    0 讨论(0)
  • 2021-01-05 21:08

    IE 8: Use F12, select the arrow control, then click on the element you're interested in.

    In this case, it's 5 divs overlapping, widths 1-5px, all with a style of "filter: alpha(opacity=x); opacity:0.x;", x going from 10 to 02

    0 讨论(0)
  • 2021-01-05 21:12

    There are 100% reliable techniques to get PNG transparency in IE, and if used in limited areas which will not bog down the browser. They could easily have used a small PNG that repeats vertically for this, but my guess is they used the DIVs to skip the use of an extra image. On Google Maps website this is a worthwhile optimisation. On any other website it won't hurt to use 5 divs for this, but a PNG "sprite" may be more flexible if you plan to use it also on overlays (for the sides and corners).

    0 讨论(0)
  • 2021-01-05 21:17

    It's actually a series of five razor-thin DIVs, each with decreasing opacity, stacked next to each other. You can see this for yourself by using Firebug and clicking on the shadow area.

    0 讨论(0)
提交回复
热议问题