Inspiration For Creative Minds
Home » Labs » Create hide / show notification bar with css3 tutorial and demo  

Filed under Labs

Here is a good tutorial and demo on creating a notification bar using only CSS3. This example didn’t use a single line of JavaScript, so its is fully user and browser friendly approach.


		:root .max-notificationbar,
		.max-notificationbar label,
		.max-notificationbar label span{
			display: block;
		.max-notificationbar *{
			margin: 0;
			padding: 0;
		.max-notificationbar > div,
		.max-notificationbar label span{
			line-height: 30px;
			text-align: center;
			color: #fff;
			transition: margin 300ms ease-in-out;
			box-shadow: 0 0 2px 2px rgba(58, 58, 58, .50);
		.max-notificationbar input{
			display: none;
			position: fixed;
			z-index: 250;
			top: 0;
			left: 0;
			width: 100%;
			color: #000;
			cursor: default;
		.max-notificationbar > div{
			margin-top: -67px;
			padding: 18px 64px;
			font-size: 16px;
		.max-notificationbar > div > div{
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		.max-notificationbar label{
			float: right;
			margin: 0 16px 0 0;
		.max-notificationbar label span{
			width: 30px;
			height: 30px;
			font-size: 27px;
			border-top: 0;
			border-radius: 0 0 4px 4px;
			cursor: pointer;
		.max-notificationbar input ~ label span:first-child{
			border-color: transparent;
			box-shadow: none;
			background: none;
		.max-notificationbar input:not(:checked) ~ label span:first-child{
			opacity: 0;
		.max-notificationbar input:checked ~ label span:first-child{
			opacity: 1;
			transition: opacity 300ms 300ms ease-in-out;
		.max-notificationbar input:not(:checked) ~ label span:last-child{
			margin-top: -33px;
		.max-notificationbar input:checked ~ label span:last-child{
			margin-top: -70px;
		.max-notificationbar input:checked ~  div{
			margin-top: 0;
		.max-notificationbar.max-notificationbar-e34c26 > div,
		.max-notificationbar.max-notificationbar-e34c26 label span{
			background: #1b58b8;


        <!-- CSS3 Notification bar -->
        <div class="max-notificationbar max-notificationbar-e34c26">
            <input type="checkbox" id="max-notificationbar-switcher" checked="checked" />
            <label for="max-notificationbar-switcher">
                <div>Pure CSS3 notification bar without jQuery. Click the arrow on the right to expand/collapse.</div>
         <!-- /CSS3 Notification bar -->

Live Demo

It's only fair to share...Share on Google+Tweet about this on TwitterShare on Facebook

Posts you may like: