Website development and design blog, tutorials and inspiration

CSS Message Notification Bars

Create CSS message notification bars to attract user attention

By , Written on in HTML/CSS

CSS Message Notification Bars

1,699 words, estimated reading time 8 minutes.

Quick CSS Snippet to show a pretty message notification bar/box with an icon. These message bars are commonplace nowadays, and I use them quite a bit in my designs because they are an important way to attract user attention.

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.

Message Types

There are four types of notification message.

Information Messages

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

Success Messages

Hooray! Success messages should be displayed after 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

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.

Error Message

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

  1. <div class="info">Info message</div>
  2. <div class="success">Successful operation message</div>
  3. <div class="warning">Warning message</div>
  4. <div class="error">Error message</div>

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

The CSS

  1. .info, .success, .warning, .error, .validation {
  2. border: 1px solid;
  3. margin: 10px 0px;
  4. padding:15px 10px 15px 50px;
  5. background-repeat: no-repeat;
  6. background-position: 10px center;
  7. }
  8. .info {
  9. color: #00529B;
  10. background-color: #BDE5F8;
  11. background-image: url('info.png');
  12. }
  13. .success {
  14. color: #4F8A10;
  15. background-color: #DFF2BF;
  16. background-image:url('success.png');
  17. }
  18. .warning {
  19. color: #9F6000;
  20. background-color: #FEEFB3;
  21. background-image: url('warning.png');
  22. }
  23. .error {
  24. color: #D8000C;
  25. background-color: #FFBABA;
  26. background-image: url('error.png');
  27. }

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.

Last updated on: Wednesday 21st June 2017

Comments
  1. Emmanuel
    Emmanuel

    Thanks for this reference! It really helped me reach a clear decision while designing a thank you confirmation page.

  2. http://www.jankoatwarpspeed.com/post/2008/05/22/CSS-Message-Boxes-for-different-message-types.aspx

    credit where credit is due

  3. Spencer Drager
    Spencer Drager

    Thanks for this. I was searching for some tips for designing notifications and stumbled on this page. I'll be using them in my latest project. I wonder if there is a site dedicated to various designs for this?

  4. V
    V

    Thanks. I use this simple class to display them as session variables.

    1. <?php
    2. class Alerts
    3. {
    4. function Alerts()
    5. {
    6. //No need to even initialize me, just use Scope Resolution Operator to use me.
    7. }
    8.  
    9. function info($msg)
    10. {
    11. $_SESSION[&apos;alerts&apos;].=&apos;<div class="info">&apos;.$msg.&apos;</div>&apos;;
    12. }
    13.  
    14. function success($msg)
    15. {
    16. $_SESSION[&apos;alerts&apos;].=&apos;<div class="success">&apos;.$msg.&apos;</div>&apos;;
    17. }
    18.  
    19. function warning($msg)
    20. {
    21. $_SESSION[&apos;alerts&apos;].=&apos;<div class="warning">&apos;.$msg.&apos;</div>&apos;;
    22. }
    23.  
    24. function error($msg)
    25. {
    26. $_SESSION[&apos;alerts&apos;].=&apos;<div class="error">&apos;.$msg.&apos;</div>&apos;;
    27. }
    28. }
    29. ?>
  5. Mat
    Mat

    Hi,

    Thanks for this, just exactly what i been looking for, thanks ever so much your lifesaver!

  6. Warner
    Warner

    Thanks for these,

    I will incorporate them in my soon to be custom 403 and 404 pages. (if that's okay whit you)

    Thnx again.

  7. Leszek
    Leszek

    Cool and useful idea of displaying messages. I've implemented it in my cms.
    Thanks!

Leave a Reply

Your email address will not be published.