Skip to content

Instantly share code, notes, and snippets.

@andrewjamesford

andrewjamesford/dabblet.css

Created February 28, 2012 21:03
Show Gist options
  • Save andrewjamesford/1935103 to your computer and use it in GitHub Desktop.
Save andrewjamesford/1935103 to your computer and use it in GitHub Desktop.
Download ZIP
CSS for iOS button notification
Raw
dabblet.css
/** iOS button notification
* The first commented line is your dabblet’s title
*/
body{
min-height:100%;
font-family: Verdana,sans-serif;
}
.notificationCont {
position: relative;
width:90px;
padding-top:10px;
}
.notification {
border-radius: 10px;
background: linear-gradient(top, #FF3019 0, #CF0404 75%);
border: 1px solid white;
box-shadow: 1px 1px 5px rgba(0,0,0,.75);
box-shadow: 1px 1px 5px rgba(0,0,0,.75);
display: block;
background: #FF3019;
background-repeat: repeat-x;
background: linear-gradient(top, #FF3019 0, #CF0404 75%);
position: absolute;
right: -8px;
font-size: 9px;
color: white;
padding: 3px 4px;
top:5px;
line-height: 90%;
text-shadow: none;
}
.btn {
border: 1px solid #CCC;
background-color: #C43C35;
background-repeat: repeat-x;
background-image: linear-gradient(top, #EE5F5B, #C43C35);
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
border-size: 1px;
padding: 7px 9px 7px;
font-size: 11px;
border-radius: 4px;
color: white;
cursor:pointer;
display:inline-block;
box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
-webkit-appearance: button;
line-height:normal;
box-sizing: border-box;
font-family: Verdana,sans-serif;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="notificationCont">
<span class="notification">3</span>
<button class="btn">Notifications</button>
</div>
Raw
settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment