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

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

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!

Tagged with:

Mary Lou

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.

http://www.codrops.com

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

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. 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 🙂