CSS3 message boxes for different types of message

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 CODE:

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

HTML

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

Messages are an important part of the user experience that is often omitted. There are many articles that show nicely styled message boxes but it is not just a matter of design. It should provide a user with meaningful information, semantically and visually.