Codrops

Simple CSS: Update box for category or posts

Tutorials August 26, 2009 by Mary Lou 1 Comment

Let’s create a simple and clean box that shows the updates in a category (or anything you might like it to use for). The result looks like this:

Starting with the css, insert the following code into the header of your page (or add it to your existing css):

<style>
 body{
   font-family:Arial;
 }

 .box{
   width: 150px;
   height: 40px;
   float: left;
   border:2px solid #ccc;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   text-align: center;
   padding: 5px;
   font-size: 14px;
   font-weight: bold;
   background-color: #f0f0f0;
   color: #888;
}

p.new{
   width: 126px;
   color: white;
   background-color: #3190A5;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   padding: 1px;
   text-align: center;
   margin-top: 5px;
   margin-left: 12px;
   font-weight: 100;
   font-size: 11px;
   color: #F0F0F0;
}
 </style>

In the body of the page, insert the html code:

<div class="box">
  IT development
  <p class="new">
     4 new posts
  </p>
</div>

The border radius is for Mozilla and Safari (and webkit browsers) and is still not supported by IE (no surprise there really).

Enjoy!

Tagged with: CSS