Domanda: in che modo Google crea l'ombretto accanto alla barra di scorrimento verticale su Google Map?HTML/CSS: come fa Google a creare questa ombra esterna sulle loro mappe?
Questa è una schermata che rappresenta esattamente ciò di cui sto parlando.
Questo sembra essere indipendentemente dal browser (IE, Firefox, Chrome) e piattaforma (Windows, Mac, Linux).
È probabile che sia -webkit-box-shadow o -moz-box-shadow, a seconda del browser.
EDIT Ho appena controllato la pagina ed è una serie di <div> allineate insieme. Cerca <div id="ds-v"> nell'origine della pagina (o in una sorta di ispettore DOM, poiché sarebbe più semplice). È molto probabilmente un qualche tipo di trucco che hanno messo insieme per ottenere un effetto interessante, ma non so quanto sia facilmente riproducibile.
In realtà è una serie di cinque DIV sottili come rasoi, ciascuno con opacità decrescente, impilati uno accanto all'altro. Puoi vederlo da solo usando Firebug e facendo clic sull'area ombreggiata.
IE 8: Usa F12, selezionare il controllo freccia, quindi fare clic sull'elemento che ti interessa
In questo caso, si tratta di 5 div sovrapposizione, larghezze 1-5px, il tutto con uno stile di ". filtro: alpha (opacità = x); opacità: 0.x; ", x che va da 10 a 02
Esistono tecniche affidabili al 100% per ottenere la trasparenza PNG in IE e se utilizzate in aree limitate che non si impantanano giù il browser. Potrebbero facilmente aver usato un piccolo PNG che si ripete verticalmente per questo, ma suppongo che abbiano usato i DIV per saltare l'uso di un'immagine extra. Sul sito web di Google Maps questa è una valida ottimizzazione. Su qualsiasi altro sito web non farà male usare 5 div per questo, ma uno "sprite" PNG potrebbe essere più flessibile se si prevede di usarlo anche nelle sovrapposizioni (per i lati e gli angoli).
No, perché è presente in IE. Buona idea però – BillB