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.

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.

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

 View Full Story.