This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Friday, March 21, 2008

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:




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

blog comments powered by Disqus
Sara said...

I like the way you present your post!

Anonymous said...

I agree with Sara :))

Mostly Lisa said...

Great post. High 5!!!

Hates_ said...

Great post!

Alen said...

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?

sinan said...

where this demo url ?
please here this demo url write

Roselavy said...

As usual, one of your many great posts. Thank you for these clean and useful tuts.

dictionnaries said...

Great post, but the HTML code for icon-heart seems to have a small mistake ;-).

Ruben Zevallos Jr said...

Very nice work... I'll try it...

Best

Daniel said...

Nice post... Just a pitty about the white backgrounds in the png's. Would be more usefull if they were transparant.

JustS said...

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.

Matt said...

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?

Tom said...

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 :)

Jordi R Cardona said...

Thanks Antonio. This post has helped me a lot.

Tyssen said...

"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).

Jordi R Cardona said...

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.

Paul said...

nice post - and great presentation too!

- J - said...

Thanks.
i've been looking stuff like this.

website design said...

Nice collection, thanks

Anonymous said...

very good collection! thank u.

Anonymous said...

Many thanks!

Paul said...

Good work.

I think using multiple classes is better solution.

.message{structure styles go here}
.red{color/image styles go here}

so u will end up with divs having class="message red" etc...

just keep it dry :)

Anonymous said...

Great idea...I had been looking for something like this.

When I view my resulting page in Firefox, the text overlaps the image. Why would that be? It looks fine in IE 6.0.

Thanks.

sai said...

Excellent! I love it

Shane said...

Hope today I had discovered a cool set of collections. Thanks Antonio! Really a nice work.

Henriket said...

Loved this post!
Many thanx!

Anonymous said...

Cool article. Thanks,.

Engineer fellow @
www.text2.talk.ca

Cao Thanh Liem said...

Nice work! thanks

lil.D said...

This is so Clear :) So nice !!

I've always felt it is so hard thing to apply!!

but your way of explanation make it so easy :)

Anonymous said...

These are great, exactly what I was looking for. Thanks for sharing!

Lisa said...

I do agree with you Sinan, very nice post, like the way you write...very easy to understand. Very nice work.

la ode adam said...

thank u for you posting.

Jason said...

Great!thanks..

Jason said...

thanks..it's great!!

Fernando said...

Very nice !!
How i make a hack for aol explorer?

Thanks.

Mijail said...

Great post and usesful tips!

Ben Horne said...

nice!

gadarf said...

Good job man.

David said...

Antonio very nice post. Incredibly helpful, I am sure many people will be returning for this post ;)

allan said...

Nice collection and nice color combination. This is one of the best ive seen so far

Xth said...

nice tutor bro..

it's useful.. :D

abrahaj said...

There is a problem with the zip download. It cannot be downloaded.

GearOne said...

Very nicely described. Thanks.

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News