Friday 20 April 2012

Map with fold by CSS

This is my experiment with map and CSS ilusion of fold. Solution is realy simple.



HTML code. Map by Google Maps API (static):

<div class="fold-map">
<img src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=300x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
    &markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false" /></div>

CSS code:

body{
    padding50px;
}
.fold-map{
    padding10px;
    -webkit-box-shadow0px 1px 3px 2px rgba(0000.2);
    -moz-box-shadow0px 1px 3px 2px rgba(0000.2);
    box-shadow0px 1px 3px 2px rgba(0000.2);
    
    width300px;
    height300px;
    
}
.fold-map:before{
    content'';
    displayblock;
    positionabsolute;
    backgroundgray;
    width150px;
    height300px;
    floatleft;
    
    background-moz-linear-gradient(leftrgba(255,255,255,00%rgba(0,0,0,0.1100%);
background-webkit-gradient(linearleft topright topcolor-stop(0%,rgba(255,255,255,0))color-stop(100%,rgba(0,0,0,0.1)));
background-webkit-linear-gradient(leftrgba(255,255,255,00%,rgba(0,0,0,0.1100%);
background-o-linear-gradient(leftrgba(255,255,255,00%,rgba(0,0,0,0.1100%);
background-ms-linear-gradient(leftrgba(255,255,255,00%,rgba(0,0,0,0.1100%);
backgroundlinear-gradient(leftrgba(255,255,255,00%,rgba(0,0,0,0.1100%);
filterprogid:DXImageTransform.Microsoft.gradientstartColorstr='#00ffffff'endColorstr='#1a000000',GradientType=);
}

Demo:
http://jsfiddle.net/tjerabek/wP5aw/

No comments:

Post a Comment