CSS Message Box

Posted by Fahad Ibnay Heylaal on Sep 25th 2008, 13:14 - in CSS

Message boxes are very useful when you want to draw your visitor's attention and show them a message after performing a particular task; let it be a sucessful user registration or an invalid login. In this tutorial, I will show you how to create simple css message boxes with solid borders.

Preview

simple-css-message-box

The HTML

As shown in the image above, we will use a DIV with a class "message" and add another class value to it (following a space) depending on the message. Notice the class attributes below.

  1.  
  2. <div class="message notice">this is a notice.</div>
  3. <div class="message success">something was successful.</div>
  4. <div class="message error">oops! an error occured.</div>

The CSS

Since "message" will be used as the default class for the container, we need to define its padding, background colour, colour (text) and border properties.

  1. .message {
  2.   padding: 10px;
  3.   border: 2px solid #ddd;
  4.   background-color: #eee;
  5.   color: #222;
  6. }

Now three more classes - notice, success, and error. They are all same in terms of properties, but notice their colour values. Background colour is a bit lighter than the solid border.

  1. .notice {
  2.   background: #FFF6BF;
  3.   color: #817134;
  4.   border-color: #FFD324;
  5. }
  6.  
  7. .success {
  8.   background: #E6EFC2;
  9.   color: #529214;
  10.   border-color: #C6D880;
  11. }
  12.  
  13. .error {
  14.   background: #FBE3E4;
  15.   color: #D12F19;
  16.   border-color: #FBC2C4;
  17. }

Simple enough for anyone to understand. You can add more classes depening on how many message boxes you need for your site. Just make sure your container looks like <div class="message myclass"> ... </div>, and it should be fine. Now try adding a few more classes and play with the colour combination. Its fun!

Share: