Professional CSS Alert Boxes

Posted on Jan.21, 20104 Comments CSS, Tools

When creating a clean and attractive website, you don’t ever want to ruin it with error pages. Although they are not always unavoidable, many scripts can easily return a clean error message. Using a simple bit of CSS makes your errors display in an smooth, non-aggressive way. This method is also very effective in returning little messages to your user such as “you are now logged in” or “you received a message”.

How

By using the “border” css property it is easy to add a dark border to the top and bottom of each container. Using a color picker choose a light and dark version of a pastel color of your choice. Using icons from FamFamFam and adding a little padding, “Bamm!”, You’re done!

Demo

[image: alertdemo]

The Code

The images needed can be found in the download below.

<html>

<head>
<style>
body {
	color: ##444444;
	font-family: 'Lucida Grande',Verdana,Arial,Sans-Serif;
	font-size: 10px;
	}

.alert {
	background: #fff6bf url(exclamation.png) center no-repeat;
	background-position: 15px 50%;
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #ffd324;
	border-bottom: 2px solid #ffd324;
	}

.info {
	background: #F8FAFC url(information.png) center no-repeat;
	background-position: 15px 50%;
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #B5D4FE;
	border-bottom: 2px solid #B5D4FE;
	}

.error {
	background: #FFBFBF url(error.png) center no-repeat;
	background-position: 15px 50%;
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #FF2424;
	border-bottom: 2px solid #FF2424;
	}
</style>
</head>

<body>
<div class="info">Information you need to know</div>
<br /><br />
<div class="alert">Alert you triggered</div>
<br /><br />
<div class="error">Error with our code</div>
</body>

</html>

Download

See how simple that was? Download the source and images here.

4 Responses to “Professional CSS Alert Boxes”

turboRamble says:

January 21, 2010 at 12:47 PM

Nice Charlie! I’ll try to use this on my site….

Thanks again!
-turboRamble
Charlie says:

January 21, 2010 at 1:40 PM

No Problem! I hope you enjoy using it.
turboRamble says:

January 28, 2010 at 9:05 PM

Err, I’m on Firefox now (downloaded it for all comps) and the cool background suddenly stops if you scroll down far enough and it turns white….

Also, I finally set up an affiliates program on my website, and you’re now on it.

-turboRamble
Charlie says:

January 28, 2010 at 9:15 PM

Cool thx!

Where on the site are you seeing that bug? I’m in firefox and I don’t see anything strange…

Want an image next to your name? Sign up at Gravatar.com and in a few seconds you will be on your way. If you are signed up on Gravatar, enter the email associated with your Gravatar account when commenting.