CodePen

HTML

            
              <section>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
	<article id="map">
	</article>
	</section>
            
          
!

CSS

            
              	body {background: #e0e0e0;}
	article {width: 100%; height:100%; background: #f2f2f2; position: relative;}
	section {max-width: 600px; height:300px; margin: 100px auto;position: relative;-moz-box-shadow: 0 0 30px 5px #888;
-webkit-box-shadow: 0 0 30px 5px#888;
box-shadow: 0 0 30px 5px #888;
}
article div span {background:transparent;	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);}
	article p {text-align: center; margin-top: 150px;}
	article:before { content: ""; opacity: .2; width: 33%; height: 50%; position: absolute; bottom: 0; left: 33%; z-index: 100; pointer-events:none;
background: -moz-linear-gradient(top,  rgba(114,114,114,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(114,114,114,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(114,114,114,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(114,114,114,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(114,114,114,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(114,114,114,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#727272', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

}
	section:before { content: ""; opacity: .2; width: 33%; height: 50%; position: absolute; top: 0; left: 0; z-index: 100;pointer-events:none;
background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(114,114,114,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(114,114,114,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(114,114,114,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(114,114,114,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(114,114,114,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(255,255,255,0) 0%,rgba(114,114,114,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#727272',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
	section:after { content: ""; opacity: .2; width: 34%; height: 50%; position: absolute; top: 0; right: 0;pointer-events:none;
	background: -moz-linear-gradient(45deg,  rgba(114,114,114,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(114,114,114,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  rgba(114,114,114,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  rgba(114,114,114,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  rgba(114,114,114,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(45deg,  rgba(114,114,114,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#727272', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
section span {position:absolute;content:""; background:#fff;display:block; width:33%; height:10px;z-index:101; pointer-events:none;}
section span:nth-child(1) {
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
top: -5px;
left: -5px;
padding-right:6px;
}
section span:nth-child(2) {
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
top: -5px;
left: 33%;
}
section span:nth-child(3) {	
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
top: -5px;
right: -8px;
padding-left:16px;
}
section span:nth-child(4) {	
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
top: 0px;
right: -5px;
width:10px;
height:50%;
padding-bottom:1px;
}
section span:nth-child(5) {	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
bottom: 0px;
right: -5px;
width:10px;
height:50%;
}
section span:nth-child(6) {	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
bottom: -5px;
right: 0;
padding-left:8px;
}
section span:nth-child(7) {	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
bottom: -5px;
left: 33%;
}
section span:nth-child(8) {-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
bottom: -5px;
left: 0;
padding-right:5px;
}
section span:nth-child(9) {	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
bottom: -10px;
left: -5px;
width:10px;
height:50%;
padding-top:10px;
}
section span:nth-child(10) {-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
top: -10px;
left: -5px;
width:10px;
height:50%;
padding-bottom:10px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              google.maps.visualRefresh = true;
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................