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:

ML 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://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

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.