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 codeClean 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;
}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;
}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:
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;
}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{
.round-a-gray div{
background:#444444 url(img/round_gray-left.png) left top no-repeat;
color:#FFFFFF;
text-align:center;
}color:#FFFFFF;
text-align:center;
.round-a-gray div{
background:url(img/round_gray-right.png) right bottom no-repeat;
padding:4px;
}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{
.tooltips-gray div{
background:#444444;
color:#FFFFFF;
text-align:center;
padding-top:4px;
}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;
}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
Antonio Lupetti
18 comments
I like the way you present your post!
I agree with Sara :))
Great post. High 5!!!
Great post!
Nice collection, thanks for sharing. You really put so much effort in your posts.
I must say I disagree with your class naming (color dependable). What if you at some point decide to change property values of class named "clean-gray" and wish to set background color to light blue?
where this demo url ?
please here this demo url write
As usual, one of your many great posts. Thank you for these clean and useful tuts.
Great post, but the HTML code for icon-heart seems to have a small mistake ;-).
Very nice work... I'll try it...
Best
Nice post... Just a pitty about the white backgrounds in the png's. Would be more usefull if they were transparant.
Thank you for the tutorial and for posting the link to the sweetie package. I have been looking for a consistent set of icons for some time now.
Nice post. Pastel colored alert boxes with a simple icon are my favorite as well.
Here is something for discussion:
When keeping semantics in mind, do you think there is a better tag that can be used to represent an alert besides a "div" tag?
Since an alert box holds some sense of importance would a header tag such as "h4" be better?
Nice work, I like the way you write.
I don't like so much the extra divs for some of these alerts, but I know it's the only way using rounded corners without js :)
Thanks Antonio. This post has helped me a lot.
"When keeping semantics in mind, do you think there is a better tag that can be used to represent an alert besides a "div" tag?
Since an alert box holds some sense of importance would a header tag such as "h4" be better?"
Whether you use a heading tag or not would depend on the exact nature of the content but at the very least I'd recommend using a paragraph in the case where there only needs to be one block level element used. If you do decide to use a heading tag, the choice should be dictated by what heading tags precede it as heading tags should be used in sequence without skipping a level (e.g. h1 followed by h2 followed by h3 is correct; h1 followed by h2 followed by h4 is incorrect).
Hi,
I used this trick combined with some coding of mine and big icons, and it looks great. You can see it here:
Post
Thank you Antonio.
nice post - and great presentation too!
Thanks.
i've been looking stuff like this.
Post a Comment