Simple CSS: Update box for category or posts

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 […]

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:

Update box

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!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 2

Comments are closed.
  1. Pingback: CSS based update box for category or posts

  2. okay ! Mary Lou .. As this place is less Crowded I think I’ll get all the attention 🙂 I love this website. And I love all your work. U r my idol now 🙂 and thank you very much for inspiring me 🙂