Cute Web 2.0 Boxes with CSS

May 20th, 2010 by Alex Leave a reply »

These boxes can be used to decorate and highlight particular information, like warnings, notices, quotes, etc.

I’ll try to include all the options here that i could think of

.warningbox {
  background: #ffdee7;
  padding: 10px 20px;
  font: normal 13px Arial;
  border: 1px solid #ffa6ae;
  border-width: 1px 0;
  color: #484848;
  text-align: center;
  margin: 10px 0
} 
.noticebox {
  background: #fffdde;
  padding: 10px 20px;
  font: normal 13px Arial;
  border: 1px solid #f3ed95;
  border-width: 1px 0;
  color: #484848;
  margin: 10px 0
}
.successbox {
  background: #deffd2;
  padding: 10px 20px;
  font: normal 13px Arial;
  border: 1px solid #adf395;
  border-width: 1px 0;
  color: #484848;
  margin: 10px 0
}
.infobox {
  background: #e8d9ff;
  padding: 10px 20px;
  font: normal 13px Arial;
  border: 1px solid #c4a5f4;
  border-width: 1px 0;
  color: #484848;
  margin: 10px 0
}
.navybox {
  background: #616161;
  padding: 10px 20px;
  font: normal 13px Arial;
  color: white;
  margin: 10px 0;
  border: 1px solid #262626; 
  border-width: 1px 0;
}
.bluebox {
  background: #0cc9e5;
  padding: 10px 20px;
  font: normal 13px Arial;
  color: white;
  margin: 10px 0;
  border: 1px solid #0091a7;
  border-width: 1px 0; 
}

Just apply any of these classes to a <div> box.

This is a warning!
This is a notice.
This is a “success” box.
Some information box, which can contain a lot of text and make the box really big and informational, with multilines, strong text, italic font etc.

And some crazy dark boxes for crazy people 🙂

This box has a nice soft blue background

This page can be found by searching for:

web 2 0 css boxweb 2 0 boxesweb 2 0 boxcute css box



1 comment

  1. film says:

    Excellent brief and this article helped me alot. Say thank you I looking for your information….