Created
April 27, 2013 09:50
-
-
Save louisbullock/5472545 to your computer and use it in GitHub Desktop.
Maps pin? [CSS]
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Maps pin? [CSS] | |
* Recreated from: http://drbl.in/foUp | |
* By Louis Bullock | |
* louisbullock.com.au | |
*/ | |
html { | |
background:#fff; | |
min-height: 100%; | |
height:100%; | |
overflow:hidden; | |
} | |
.close { | |
top:50%; | |
left:50%; | |
margin:-70px 0 0 -57px; | |
padding:0; | |
height:54px; | |
width:54px; | |
border:30px solid; | |
color: #DF2231; | |
display: block; | |
border-radius: 50%; | |
position:absolute; | |
background-color: transparent; | |
box-shadow: | |
0 -0.1em 0 #FF8E97, | |
0 -0.5em 0 #FF4251, | |
inset 0 -0.1em 0 #700A12, | |
inset 0 -0.5em 0 #9B0F1A, | |
0 3em 2em -1em rgba(4, 48, 63, 0.3), | |
0 4em 2em -2em rgba(4, 48, 63, 0.9), | |
0 3em 2em 0em rgba(4, 48, 63, 0.1) | |
; | |
} | |
.close:after { | |
content:''; | |
display: block; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
margin: 27px 0 0 -54px; | |
padding: 0; | |
height: 0; | |
width: 1px; | |
border: 53px solid transparent; | |
border-top-color: inherit; | |
border-radius: 50%; | |
} | |
.wrapper { | |
width:400px; | |
height:300px; | |
left:50%; | |
top:50%; | |
margin:-150px -200px; | |
position:absolute; | |
display:block; | |
background-image: -webkit-linear-gradient(#FCFEFF, #E4F8FF); | |
box-shadow: | |
inset 0 0em 6em rgba(49, 137, 168, 0.5), | |
inset 0 -2em 6em rgba(49, 137, 168, 0.2); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="wrapper"> | |
<i class="close"></i> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment