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 dark background

This box has a nice soft blue background

Posted in CSS

You can follow any responses to this entry through the RSS 2.0 Feed. You can leave a response , or trackback from your own site.

Cute Web 2.0 Boxes with CSS

Leave a Reply