CSS Message Boxes With CSS3

Monday, June 13, 2011 EDT (Updated on: Sunday, July 24, 2011 EDT)

by: Eric Potvin

When you develop Web Applications, and you display messages to the user, it is nice to make them as clear as possible. In addition, colors can give the user a quick look on what is going on.

Here's some example of message boxes using css3 that might be helpful for your Website.

Here's the source

<style type="text/css">
.info, .success, .warning, .error {
    border: 1px solid;
    margin: 15px 0px;
    padding:15px 20px 15px 55px;
    width: 500px;	
    font: bold 12px verdana;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    text-shadow: 2px 2px 2px #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
.info {
    color: #00529B;
    background: #BDE5F8 url('http://mydomain.com/images/icon-info.png') no-repeat 10px center;
}
.success {
    color: #4F8A10;
    background: #DFF2BF url('http://mydomain.com/images/icon-tick.png') no-repeat 10px center;
}
.warning {
    color: #9F6000;
    background: #FEEFB3 url('http://mydomain.com/images/icon-warning.png') no-repeat 10px center;
}
.error {
    color: #D8000C;
    background: #FFBABA url('http://mydomain.com/images/icon-cross.png') no-repeat 10px center;
}
</style>

<div class="info">Info message</div>
<div class="success">Successful operation message</div>
<div class="warning">Warning message</div>
<div class="error">Error message</div>

• Download PDF*
• View/post comments
• Link to this article
• Print this article
• Bookmark this article