Matt Varone Creative Designer

— Following the line of the previous post, here is another set of reusable classes I like to use. This time to create Message Boxes which I found myself using in almost every site I make, mostly on the forms. These Message Boxes are useful to display and inform in a nice way different messages, like announcements, alerts, or status information. I like to keep things simple so i use a very clean style:

CSS classes:

Nothing too fancy or complicated. I use a main class .message-box , and then the different style variations separated, but just to dont repeat code and keep things more organized:

/* MESSAGE BOXES
/////////////////////////////*/

.message-box { text-align: center; padding: 5px; color:#545454; width:80%;  margin:5px auto; }

.clean { background-color: #efefef; border-top: 2px solid #dedede; border-bottom: 2px solid #dedede; }
.info  { background-color: #f7fafd; border-top: 2px solid #b5d3ff; border-bottom: 2px solid #b5d3ff; }
.ok    { background-color: #d7f7c4; border-top: 2px solid #82cb2f; border-bottom: 2px solid #82cb2f; }
.alert { background-color: #fef5be; border-top: 2px solid #fdd425; border-bottom: 2px solid #fdd425; }
.error { background-color: #ffcdd1; border-top: 2px solid #e10c0c; border-bottom: 2px solid #e10c0c; }

» Continue reading: Message Boxes with CSS…