Skip to content

Instantly share code, notes, and snippets.

@johan

johan/index.html

Created June 19, 2012 23:02
Show Gist options
  • Save johan/2957047 to your computer and use it in GitHub Desktop.
Save johan/2957047 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 map unfold shadows effect
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>(CSS3) Unfold Map with Pins &middot; CodePen</title>
<style>
/* based on http://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(http://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>
Raw
page.html
<div class="hold_it">
<div class="holder">
<span class="pin" style="left: 140px; top: 75px;" alt="Montreal"></span>
<span class="pin" style="left: 373px; top: 103px;" alt="Hong-Kong"></span>
<div class="map"></div>
<div class="shadow1"></div>
<div class="shadow2"></div>
<div class="shadow3"></div>
<div class="shadow4"></div>
</div>
<div class="bshw-left"><div>
<div class="bshw-right"><div>
</div>
​
Raw
style.css
/*by ericftremblay.com*/
body {
margin: 20px;
text-align: center;
background: #eee;
}
.holder {
width: 491px;
height: 260px;
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://dl.dropbox.com/u/4127845/worldmap.jpg);
width: 491px;
height: 260px;
z-index: -999;
position: absolute;
}
.shadow1 {
z-index: -5;
position: absolute;
background: url(data: image/svg+xml;
border-bottom: solid 1px #fff;
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='#00000000', endColorstr='#33000000',GradientType=1 );
width: 50%;
height: 50%;
pointer-events: none;
}
.shadow2 {
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='#00000000', endColorstr='#33000000',GradientType=1 );
width: 50%;
height: 50%;
left: 50%;
pointer-events: none;
}
.shadow3 {
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='#00000000', endColorstr='#33000000',GradientType=1 );
width: 50%;
height: 50%;
top: 50%;
pointer-events: none;
}
.shadow4 {
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='#00000000', endColorstr='#33000000',GradientType=1 );
width: 50%;
height: 50%;
top: 50%;
left: 50%;
pointer-events: none;
}
.bshw-left {
bottom: 0;
left: 30px;
float: left;
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-right {
bottom: 0;
left: 200px;
float: right;
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);
}
.bshw1 {
bottom: -20px;
position: absolute;
z-index: 1000;
float: left;
}
.bshw2 img {
bottom: 5px;
position: absolute;
z-index: 1000;
float: right;
right: 0;
}
.pin {
display: inline-block;
width: 8px;
height: 8px;
background-color: #f33;
background-image: -webkit-linear-gradient(top, rgba(100,0,0,0), rgba(255,90,90,1));
background-image: -moz-linear-gradient(top, rgba(100,0,0,0), rgba(255,90,90,1));
background-image: -ms-linear-gradient(top, rgba(100,0,0,0), rgba(255,90,90,1));
background-image: -o-linear-gradient(top, rgba(100,0,0,0), rgba(255,90,90,1));
background-image: linear-gradient(to bottom, rgba(100,0,0,0), rgba(255,90,90,1));
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
box-shadow: 0 0 0 1px #c00, inset 0 1px 1px rgba(255,255,255,.6), 0 2px 2px rgba(0,0,0,.4);
position: absolute;
}
.pin:after {
height: 10px;
width: 2px;
content:'';
background: #aaa;
display: block;
position: absolute;
z-index: -1;
left: 3px;
top: 100%;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.1),
0 0 1px 1px hsla(0,0%,0%,.2),
0 2px 3px hsla(0,0%,0%,.3),
0 4px 3px hsla(0,0%,0%,.3),
0 6px 6px hsla(0,0%,0%,.1),
2px 10px 6px hsla(0,0%,0%,.7);
}
.pin:hover:after {
background: rgba(0,0,0,.7);
-webkit-box-shadow: inset 0px -10px 10px rgba(0,0,0,.7), 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);
-moz-box-shadow: inset 0px -10px 10px rgba(0,0,0,.7), 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);
box-shadow: inset 0px -10px 10px rgba(0,0,0,.7), 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #fff;
content: attr(alt);
font-size: 11px;
font-family: "Helvetica Neue", Helvetica, Sans;
position: absolute;
text-align: center;
display: block;
padding: 6px 0px 10px 0;
width: 68px;
text-shadow: 0 -1px 0 #000;
white-space: nowrap;
z-index: 98;
left: -30px;
top: 15px;
}
​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment