D3 Examples - CSS3 map unfold shadows effect

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>(CSS3) Unfold Map with Pins &middot; CodePen</title>
  <style>
/* based on https://codepen.io/ericft/pen/map_pins/ by ericftremblay.com */
​
body {
    margin: 20px;
    text-align: center;
    background: #eee;
}
​
.holder, .map {
    width: 512px;
    height: 300px;
}
​
.holder {
    overflow: hidden;
    position: relative;
    z-index: 1000;
}
​
.hold_it {
    padding: 6px;
    background: #fff;
    display: inline-block;
    box-shadow: 0 1px 1px 1px rgba(0,0,0,0.2);
    position: relative;
    margin: 0 auto;
    left: 20px;
    border-radius: 4px;
}
​
.map {
    background: url(https://maps.google.com/maps/api/staticmap?center=35,12&zoom=1&size=512x300&maptype=terrain&sensor=false);
    z-index: -999;
    position: absolute;
}
​
.shadow {
    width: 50%;
    height: 50%;
    z-index: -5;
    position: absolute;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iOTklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
​
    background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
    background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
    background: -o-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
    background: -ms-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
    background: linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0,0,0,0)00000', endColorstr='#33000000',GradientType=1 );
    pointer-events: none;
}
.shadow:nth-child(2n+1) {
    left: 50%;
}
.shadow + .shadow + .shadow {
    top: 50%;
}
​
.bshw-left, .bshw-right {
    bottom: 0;
    position: absolute;
    z-index: -1000;
    width:250px;
    height:100px;
    border-radius: 45%;
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.1),
                0 4px 3px hsla(0,0%,0%,.1),
                0 6px 6px hsla(0,0%,0%,.1),
                0 10px 6px hsla(0,0%,0%,.1);
}
.bshw-left {
    left: 30px;
    float: left;
}
.bshw-right {
    left: 200px;
    float: right;
}
  </style>
</head>
<body>
  <div class="hold_it">
    <div class="holder">
      <div class="map"></div>
      <div class="shadow"></div>
      <div class="shadow"></div>
      <div class="shadow"></div>
      <div class="shadow"></div>
    </div>
    <div class="bshw-left"></div>
    <div class="bshw-right"></div>
  </div>
</body>
</html>
​
    