— 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…
