By clarklab in CSS Bits on Date 04/17/2008

CSS Bits - Vol 1 - Confirmation Message Boxes

Today we are starting a new series called CSS Bits. Each article will contain a downloadable pack of my original CSS code and images for you to use in your own projects. Having a bunch of pre-made bits around can really help speed up the design process. Think of it like collecting typefaces or stock images. Having more resources at your disposal means having more options and working more efficiently during a project. The CSS Bits articles will try to be pieces that a designer needs frequently but aren't always worth creating from scratch for every single project. Today's focus? Confirmation message boxes. Here is what I'm talking about:

Congratulations, your submission was accepted.
There was an error in your request. Try again.
Warning: Are you sure you want to continue?
You seem lost, would you like to see the FAQs?

You've all seen them. They are so popular right now. People have been ditching the pop-up confirmation message because its just so annoying. These styles will work anywhere you can apply a class. Here's how it works: 1. There are for class names, one for each style. They are pretty self explanatory. The class titles are: .confirmationaccept, .confirmationerror, .confirmationwarning, and .confirmationquestion, all of which can be found in the all.css file included in the download. 2. You can use the styles by applying the class name to the object you want to style. For this demonstration, I'm applying it to a div tag, but it would work fine on a p or other element. I trust you all know how to add a class to an element, but just in case you don't, its as easy as adding: class="confirmationerror" to your divtag. 3. Thats really all there is to it. The CSS is already written for you, so theres not much else to do. Here is the CSS that goes with the class:

.confirmationerror {
background:#ffebeb url(images/x.gif) no-repeat;
background-position:7px 7px;
border:1px solid #f5c1c2;
padding:8px 8px 8px 28px;

download now

or register to post comments.