Create hide / show notification bar with css3 tutorial and demo

 
		:root .max-notificationbar,
		.max-notificationbar label,
		.max-notificationbar label span{
			display: block;
		}
		.max-notificationbar,
		.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,
		.max-notificationbar input{
			display: none;
		}
		.max-notificationbar{
			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">
                <span>&#8679;</span>
                <span>&#8681;</span>
            </label>
            <div>
                <div>Pure CSS3 notification bar without jQuery. Click the arrow on the right to expand/collapse.</div>
            </div>
        </div>
        </div>
         <!-- /CSS3 Notification bar -->