Just what it looks like.
A Pen by Derek Wheelden on CodePen.
<h1>Pulsing Notification Badge</h1> | |
<div class="notifications"> | |
<div class="notification"> | |
Marketing | |
</div> | |
<div class="notification notify"> | |
Redesign Conf | |
</div> | |
<div class="notification"> | |
Developers | |
</div> | |
</div> |
Just what it looks like.
A Pen by Derek Wheelden on CodePen.
@import "compass"; | |
$border-size: 0.25em; | |
$border-color: hsl(0, 90, 40); | |
.notifications { | |
position: absolute; | |
top: calc(50% + 1em); | |
left: calc(50%); | |
box-shadow: 0 0 0 0.5em hsla(0, 0, 0, 0.1); | |
transform: translate(-50%, -50%); | |
} | |
.notification { | |
position: relative; | |
width: 20em; | |
padding: 0 1em; | |
font-size: 0.8em; | |
line-height: 3.125; | |
color: white; | |
cursor: pointer; | |
@include linear-gradient(hsl(0, 0, 17), hsl(0, 0, 15)); | |
} | |
.notification:hover { | |
@include linear-gradient(tomato, darken(tomato, 20%)); | |
} | |
.notification.notify:after { | |
content: '1'; | |
display: block; | |
position: absolute; | |
top: 0; | |
right: 1.3333em; | |
width: 2em; | |
margin: 1.0833em 0; | |
border-radius: 50%; | |
font-size: 0.75em; | |
line-height: 2; | |
text-align: center; | |
background: hsl(0, 90, 60); | |
box-shadow: 0 0 0 $border-size $border-color; | |
animation: pulse 0.75s infinite; | |
} | |
@include keyframes (pulse) { | |
0% { box-shadow: 0 0 0 #{$border-size * 0.8} $border-color; } | |
25% { box-shadow: 0 0 0 #{$border-size * 0.2} $border-color; } | |
50% { box-shadow: 0 0 0 #{$border-size * 1.5} $border-color; } | |
75% { box-shadow: 0 0 0 #{$border-size * 0.8} $border-color; } | |
100% { box-shadow: 0 0 0 #{$border-size * 1.2} $border-color; } | |
} | |
/** PAGE STYLES **/ | |
@import url(http://fonts.googleapis.com/css?family=Lato:300|Oswald); | |
* { @include box-sizing(border-box); } | |
html, body { width: 100%; height: 100%; } | |
html { font-size: 62.5%; } | |
body { | |
background: hsl(120, 70, 70); | |
font-family: 'Lato', sans-serif; | |
font-size: 2em; | |
} | |
h1 { | |
margin: 0; | |
padding: 1em; | |
font-family: 'Oswald', sans-serif; | |
font-size: 2em; | |
text-transform: uppercase; | |
text-align: center; | |
color: lighten(hsl(120, 70, 70), 30%); | |
} |