2010-03-23 6 views
5

Pregunta: ¿Cómo crea Google la sombra junto a la barra de desplazamiento vertical sobre el mapa de Google?HTML/CSS: ¿Cómo crea Google esta sombra paralela sobre sus mapas?

Esta es una captura de pantalla que muestra exactamente de lo que estoy hablando.

enter image description here

Ésta parece ser independientemente del navegador (IE, Firefox, Chrome) y la plataforma (Windows, Mac, Linux).

Respuesta

1

Lo más probable es -webkit-box-shadow o -moz-box-shadow, dependiendo de su navegador.

EDITAR acabo de revisar la página, y es una serie de <div> alineados juntos. Busque <div id="ds-v"> en la fuente de la página (o en algún tipo de inspector DOM, ya que sería más fácil). Es muy probable que se trate de algún tipo de truco que hayan creado para obtener un efecto genial, pero no sé cuán fácilmente reproducible es esto.

+0

No, porque está presente en IE. Buena idea, aunque – BillB

8

En realidad es una serie de cinco DIV delgados como cuchillas, cada uno con opacidad decreciente, apilados uno al lado del otro. Puede ver esto usted mismo usando Firebug y haciendo clic en el área sombreada.

2

IE 8: Uso F12, seleccione el control de flecha, a continuación, haga clic en el elemento que le interesa

En este caso, es 5 divs superposición, anchos 1-5px, todo ello con un estilo de ". filter: alpha (opacity = x); opacity: 0.x; ", x yendo de 10 a 02

1

Existen técnicas 100% confiables para obtener transparencia PNG en IE, y si se usan en áreas limitadas que no se empantanan abajo del navegador. Podrían haber usado fácilmente un PNG pequeño que se repite verticalmente para esto, pero supongo que usaron los DIV para omitir el uso de una imagen extra. En el sitio web de Google Maps, esta es una optimización que vale la pena. En cualquier otro sitio web no va a doler usar 5 divs para esto, pero un "sprite" PNG puede ser más flexible si planea usarlo también en superposiciones (para los lados y las esquinas).

Cuestiones relacionadas