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

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!

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 2

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

  2. 1

    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 :)

Comments are closed.