Skip to content

Instantly share code, notes, and snippets.

@scottcorgan
Created June 19, 2012 15:52
Show Gist options
  • Save scottcorgan/2954939 to your computer and use it in GitHub Desktop.
Save scottcorgan/2954939 to your computer and use it in GitHub Desktop.
<i> Cloud
/* <i> Cloud */
html {
min-height: 100%;
background: linear-gradient(#b4bcbf, #fff);
}
.cloud {
display: inline-block;
background-color: #fff;
width: 3em;
height: 1em;
border-radius: 3em;
position: relative;
box-shadow: inset 0 -1px rgba(255,255,255,.6), 0 2px 2px rgba(0,0,0,.1), inset 0 -2px 2px rgba(0,100,160,.1);
}
.cloud:before, .cloud:after {
content:'';
position: absolute;
background-color: #fff;
width: 14px;
height: 14px;
border-radius: 100%;
top: -6px;
left: 7px;
}
.cloud:after {
width: 23px;
height: 23px;
left: auto;
right: 7px;
top: -10px
}
.cloud { /* This stuff is just for the demo */
position: absolute;
top: 50%;
left: 50%;
margin: -.5em -1.5em;
}
<i class=cloud></i>
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment