Shrinking count notification with CSS

2015-07-27 00:00:00 by Mike

Oh the excitement of seeing a red dot with a number in the middle!
It's telling you: You have email, you have chats to read, you have online stuff to check out!

With the massive popularity of iOS, Facebook and LinkedIn comes the associated design conventions, and the
shrinking count notification is one of those UI features.

The HTML:

<div class="icon-holder" id="messages">
	<div class="notification">
		<div id="count" class="">
			30
		</div>
	</div>
	<img src="icon-messages.png" class="icon">
</div>

<a href="#" id="dismiss">dismiss notification</a>

The CSS:

.icon-holder {
	position:relative;
	width:300px;
}
.icon {
	max-width:100%;
}
.notification {
	width:7em;
	text-align: center;
	position:absolute;
	right:-1em;
	top:0;
}
.notification #count {
	background:#f00;
	width:2em;
	height:2em;
	line-height: 2em;
	color:#fff;
	border-radius: 2em;
	font-size:3em;
	font-family: Helvetica, "San-serif", Arial;
	font-weight: 100;
	margin:auto;
	overflow:hidden;
}

strong a {
	font-family: Helvetica, "San-serif", Arial;
	text-decoration: underline;
	font-size:1em;
	color:#37c;
}

/* begin: animation styles */
#count.dismissed {
	-webkit-animation-duration: .25s;
  	animation-duration: .25s;
  	-moz-animation-duration: .25s;
  	-webkit-animation-name: dismiss;
  	animation-name: dismiss;
  	-moz-animation-name: dismiss;
  	-webkit-animation-fill-mode: forwards;
  	animation-fill-mode: forwards;
  	-moz-animation-fill-mode: forwards;
};

@keyframes dismiss {
  	from {
    	width:2em;
    	height:2em;
    	margin-top:0;
    	margin-bottom:0;
  	}
  	to {
    	width:0;
    	height:0;
    	margin-top:1em;
    	margin-bottom:1em;
  	}
}
@-webkit-keyframes dismiss {
  	from {
    	width:2em;
    	height:2em;
    	margin-top:0;
    	margin-bottom:0;
  	}
  	to {
    	width:0;
    	height:0;
    	margin-top:1em;
    	margin-bottom:1em;
  	}
}
@-moz-keyframes dismiss {
  	from {
    	width:2em;
    	height:2em;
    	margin-top:0;
    	margin-bottom:0;
  	}
  	to {
    	width:0;
    	height:0;
    	margin-top:1em;
    	margin-bottom:1em;
  	}
}

The JavaScript:

window.addEventListener("load", function() {
	eleDismissLink = document.getElementById("dismiss");
	eleCount = document.getElementById("count");
	eleDismissLink.addEventListener("click", function(e) {
		e.preventDefault();
		eleCount.className += " dismissed";

	});
});