CSS Message Box collection

Message boxes are useful elements to display status messages after or during a specific user request.

Some days ago I wrote this post about how to implement a nice Ajax chains of effects (fade in, delay, fade out) for a common message box using mootools. Today I want to share with you a collection of some simple CSS styles you can apply to your message boxes (clean, solid, iconized, alternated rounded borders, tooltip).

I added also a link to download a beautiful icon pack to use in your projects to design custom message box or other graphic elements.

Download message box collection source code


Clean message box
I love clean and simple design and in general this is my preferred message box style: a border (1px) and a light background color:

HTML code is very simple:

<div class="clean-gray">Clean message box</div>

...a DIV layer with with some text within. And CSS code is something like this:

.clean-gray{

border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;

}

I suggest you to use "pastel" color for the background color and a darker color for the text.


Iconized message box
This is another box style I like. A simple box with an icon in background which describe visually the "event" it represents (ok, error, alert...):

HTML code is the same you saw in the previous example:

<div class="clean-gray">Clean message box</div>

...and the related CSS code is:

.icon-heart{

border:solid 1px #DEDEDE;
background:#FFFFCC url(img/icon-heart.png) 8px 6px no-repeat;
color:#222222;
padding:4px;
text-align:center;

}

If you are looking for nice icons I suggest to download this beautiful icon pack (Sweetie Pack). This is a preview of the content:

Download Sweetie Icon Pack 1 Sweetie website

You can use it to design your iconized message box or, for example, CSS buttons and other graphic elements for your web projects.


Solid message box
Nothing simpler: a message box with no borders and with text color in contrast with the background color:

HTML code is:

<div class="solid-green">Solid message box green</div>

...and CSS code is:

.solid-green{

background:#008000;
color:#FFFFFF;
font-weight:bold;
padding:4px;
text-align:center;

}

...choose the background color you prefer!


Alternated rounded borders message box
This is anoter nice solution with alternated rounded borders (top-left, bottom-right). The box adapts automatically the rounded borders position with its width and height:

HTML code is the following:

<div class="round-a-gray"><div>Alternated rounded borders message box</div></div>

...a DIV layer inside the main DIV layer with "round-a-gray" class. CSS code is:

.round-a-gray{

background:#444444 url(img/round_gray-left.png) left top no-repeat;
color:#FFFFFF;
text-align:center;

}
.round-a-gray div{

background:url(img/round_gray-right.png) right bottom no-repeat;
padding:4px;

}

Solid tooltip message box
This is a classic. A tooltip message box:

HTML is the following:

<div class="tooltips-gray">Solid message box<div></div></div>

...and CSS code is:

.tooltips-gray{

background:#444444;
color:#FFFFFF;
text-align:center;
padding-top:4px;

}
.tooltips-gray div{

background:url(img/tips_gray.png) left bottom no-repeat;
padding-top:4px;
height:18px;

}

You can yse the image you prefer to simulate the "arrow" for your tooltip.

Download the source code (HTML+CSS)

Download message box collection source code