CSS Message
<style>
.success, .fail, .information, .attention {
background-repeat: no-repeat;
background-position: 10px center;
height: 20px;
text-transform: uppercase;
font-size: 11px;
line-height: 22px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 50px;
}
/* Succes Notification Box */
.success {
background-color: #EBF8D6;
border: 1px solid #A6DD88;
color: #539B2D;
background-image: url(images/accept00.png);
}
/* Failure Notification Box */
.fail {
background-color: #FFECE6;
border: 1px solid #FF936F;
color: #842100;
background-image: url(images/delete00.png);
}
/* Information Notification Box */
.information {
background-color: #D3EEF1;
border: 1px solid #81CDD8;
color: #369CAB;
background-image: url(images/info0000.png);
}
/* Attention Notification Box */
.attention {
background-color: #FFFBCC;
border: 1px solid #FFF35E;
color: #C69E00;
background-image: url(images/warning0.png);
}
/* Notification Close Button */
.close-notification {
width: 16px;
height: 16px;
position: absolute;
background: url(images/close000.png) no-repeat;
top: 4px;
right: 4px;
cursor: pointer;
}
</style>
This is a Success Message
This is an attention box.
This is an failure box.
This is an information box.
Download
http://dl.dropbox.com/u/3293191/CSS/CSS_message.zip
