![[image: socialicon]](http://www.thatguycharlie.com/wp-content/themes/allthatstuff/img/social/twitter_16.png)
![[image: socialicon]](http://www.thatguycharlie.com/wp-content/themes/allthatstuff/img/social/flickr_16.png)
![[image: socialicon]](http://www.thatguycharlie.com/wp-content/themes/allthatstuff/img/social/facebook_16.png)
![[image: socialicon]](http://www.thatguycharlie.com/wp-content/themes/allthatstuff/img/social/youtube_16.png)
![[image: socialicon]](http://www.thatguycharlie.com/wp-content/themes/allthatstuff/img/social/deviantart_16.png)
![[image: socialicon]](http://www.thatguycharlie.com/wp-content/themes/allthatstuff/img/rss_sub.png)
Professional CSS Alert Boxes
Posted on Jan.21, 20108 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]](http://www.simpleshare.vividperfection.com/privateuploads/alertdemo.png)
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.
Nice Charlie! I’ll try to use this on my site….
Thanks again!
-turboRamble
No Problem! I hope you enjoy using it.
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
Cool thx!
Where on the site are you seeing that bug? I’m in firefox and I don’t see anything strange…
Just wasting some free time on Digg and I found your entry. Not normally what I like to learn about, but it was definitely worth my time. Thanks.
That is unbelievable and very nicely written. Generally I do not make a comment on the web, However I have to congratulate you on this one. Superb site
You’re right on the money with this article, keep up the good work!
That was intriguing . I admire your finesse that you put into your post . Please do continue with more similar to this.