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; }

How to use them:

It is very easy to implement them, you have to first add the message-box class and then the wanted style class ( .clean, .info, .ok, .alert or .error ) to the element you want to use as message box. I tend to use a <p> element to display them:

<p class="message-box info">This is an Info Message</p>

<p class="message-box ok">This is an Ok Message</p>

<p class="message-box alert">This is an Alert Message</p>

<p class="message-box error">This is an Error Message</p>

And thats it. Simple but nice looking! I hope you enjoyed.