Needed a nice little UI for showing when a web-site we're building, is in live mode!
A Pen by Nathan Monk on CodePen.
<div id="on-air"> | |
<i class="fa fa-circle"></i> | |
<span class="live">Live</span> | |
</div> |
Needed a nice little UI for showing when a web-site we're building, is in live mode!
A Pen by Nathan Monk on CodePen.
@import "compass/css3"; | |
.live { | |
border-radius:4px; | |
background-color:black; | |
display:inline-block; | |
color:#77bccc; | |
padding:7px 7px 4px 7px; | |
font-family:sans-serif; | |
font-style:italic; | |
font-weight:bold; | |
text-transform:uppercase; | |
font-size:12px; | |
line-height:12px; | |
letter-spacing:1px; | |
top:-1px; | |
position:relative; | |
background: rgb(0,0,0); | |
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(79,79,79,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(79,79,79,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(76%,rgba(43,43,43,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1))); | |
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); | |
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); | |
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); | |
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#131313',GradientType=0 ); | |
} | |
.fa-circle { | |
-webkit-animation-name: blinker; | |
-webkit-animation-duration: 2s; | |
-webkit-animation-timing-function: linear; | |
-webkit-animation-iteration-count: infinite; | |
-moz-animation-name: blinker; | |
-moz-animation-duration: 2s; | |
-moz-animation-timing-function: linear; | |
-moz-animation-iteration-count: infinite; | |
animation-name: blinker; | |
animation-duration: 2s; | |
animation-timing-function: linear; | |
animation-iteration-count: infinite; | |
color: red; | |
} | |
@-moz-keyframes blinker { | |
0% { opacity: 1.0; } | |
50% { opacity: 0.0; } | |
100% { opacity: 1.0; } | |
} | |
@-webkit-keyframes blinker { | |
0% { opacity: 1.0; } | |
50% { opacity: 0.0; } | |
100% { opacity: 1.0; } | |
} | |
@keyframes blinker { | |
0% { opacity: 1.0; } | |
50% { opacity: 0.0; } | |
100% { opacity: 1.0; } | |
} | |
html { | |
display:table; | |
width:100%; | |
height: 100%; | |
overflow:hidden; | |
} | |
body { | |
display: table-cell; | |
text-align: center; | |
vertical-align: middle; | |
background-color: #77bccc; | |
} |
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> |