Cool Notification Messages With CSS3 & jQuery
<!DOCTYPE html>
<html>
<head>
<title>Cool notification messages with CSS3 & Jquery</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var myMessages = ['info','warning','error','success']; // define the messages types
function hideAllMessages()
{
var messagesHeights = new Array(); // this array will store height for each
for (i=0; i<myMessages.length; i++)
{
messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
$('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport
}
}
function showMessage(type)
{
$('.'+ type +'-trigger').click(function(){
hideAllMessages();
$('.'+type).animate({top:"0"}, 500);
});
}
$(document).ready(function(){
// Initially, hide them all
hideAllMessages();
// Show message
for(var i=0;i<myMessages.length;i++)
{
showMessage(myMessages[i]);
}
// When message is clicked, hide it
$('.message').click(function(){
$(this).animate({top: -$(this).outerHeight()}, 500);
});
});
</script>
<style>
body
{
margin: 0;
padding: 0;
font: 12px Arial, Helvetica, sans-serif;
background: #f1f1f1;
}
.message
{
-webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px;
background-size: 40px 40px;
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
width: 100%;
border: 1px solid;
color: #fff;
padding: 15px;
position: fixed;
_position: absolute;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
-webkit-animation: animate-bg 5s linear infinite;
-moz-animation: animate-bg 5s linear infinite;
}
.info
{
background-color: #4ea5cd;
border-color: #3b8eb5;
}
.error
{
background-color: #de4343;
border-color: #c43d3d;
}
.warning
{
background-color: #eaaf51;
border-color: #d99a36;
}
.success
{
background-color: #61b832;
border-color: #55a12c;
}
.message h3
{
margin: 0 0 5px 0;
}
.message p
{
margin: 0;
}
@-webkit-keyframes animate-bg
{
from {
background-position: 0 0;
}
to {
background-position: -80px 0;
}
}
@-moz-keyframes animate-bg
{
from {
background-position: 0 0;
}
to {
background-position: -80px 0;
}
}
#trigger-list
{
text-align: center;
margin: 100px 0;
padding: 0;
}
#trigger-list li
{
display: inline-block;
*display: inline;
zoom: 1;
}
#trigger-list .trigger
{
display: inline-block;
background: #ddd;
border: 1px solid #777;
padding: 10px 20px;
margin: 0 5px;
font: bold 12px Arial, Helvetica;
text-decoration: none;
color: #333;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#trigger-list .trigger:hover
{
background: #f5f5f5;
}
.centered
{
text-align: center;
}
.twitter-follow-button
{
position: relative;
top: 7px;
}
</style>
</head>
<body>
<div class="info message">
<h3>FYI, something just happened!</h3>
<p>This is just an info notification message.</p>
</div>
<div class="error message">
<h3>Ups, an error ocurred</h3>
<p>This is just an error notification message.</p>
</div>
<div class="warning message">
<h3>Wait, I must warn you!</h3>
<p>This is just a warning notification message.</p>
</div>
<div class="success message">
<h3>Congrats, you did it!</h3>
<p>This is just a success notification message.</p>
</div>
<ul id="trigger-list">
<li><a href="#" class="trigger info-trigger">Info</a></li>
<li><a href="#" class="trigger error-trigger">Error</a></li>
<li><a href="#" class="trigger warning-trigger">Warning</a></li>
<li><a href="#" class="trigger success-trigger">Success</a></li>
</ul>
</body>
</html>
