CSS Message Notification Bars

CSS Message Notification Bars are commonplace nowadays so here is a simple CSS Snippet to show a pretty message notification bar.

I've included the CSS, XHTML and images here so I have access to the code where ever I am working on a project. I hope it can be useful to you as well. Unfortunately I cannot remember or find the original author for these, so if anybody knows please let me know so I can give them credit.

Credits and original post to Janko At Warp Speed.

CSS Message Notification Bars Types

There are four types of notification messages.

Information messages can be used to share information with the user, suggestions or tips. Blue is used as a universal colour meaning "help".

Hooray! Success messages should be displayed after the user successfully performs an operation such as registering, submitting a form or that something else has happened successfully. Green is a universal "go" or "success" colour.

Warning messages indicate that something may have gone wrong, but it isn't an emergency. They are intended to pass information to the user with more urgency than an information message. Yellow is used as a "caution" colour.

Oops! Something went horribly wrong. These messages should be used when an error occurs, validation fails or an action cannot be completed. Red is a universally recognised colour meaning alert, error, danger.

The XHTML for CSS Message Notification Bars

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

That's it. Nice and easy isn't it?

The CSS for CSS Message Notification Bars

.info, .success, .warning, .error, .validation {
  border: 1px solid;
  margin: 10px 0px;
  padding:15px 10px 15px 50px;
  background-repeat: no-repeat;
  background-position: 10px center;
}
.info {
  color: #00529B;
  background-color: #BDE5F8;
  background-image: url('info.png');
}
.success {
  color: #4F8A10;
  background-color: #DFF2BF;
  background-image:url('success.png');
}
.warning {
  color: #9F6000;
  background-color: #FEEFB3;
  background-image: url('warning.png');
}
.error {
  color: #D8000C;
  background-color: #FFBABA;
  background-image: url('error.png');
}

The Icons

These icons are part of the Knob Toolbar icons collection hosted on DeviantArt. Please visit the site to download the full icon pack.