So you’re writing some CSS for your website. You are about to “theme” an element, let’s say a DIV, you set a width to it in order to look as you want. Then you add some content inside and most likely you will add some padding (to add some space).

In the CSS “box-model” what will happen is that the width of the element (and the height) will be increased due to the padding applied. If the width was set to 100px and you added 20px padding, the rendered element will measure 140px (100px + 20px padding left + 20px padding right)

Continue reading →

I have to confess I was not aware you could do so many shapes with CSS3 until I came across with this link. This is, of course, only possible in modern browsers.

By modifying simple attributes like width, height, colors and specially borders, you can easily achieve a huge spectrum of different shapes. A few lines of code could safe precious time normally spent on images editors like Photoshop, GIMP, etc. That’s a plus.

The minus (in my personal opinion) is definitely the lack of consistency when defining some CSS properties which, unfortunately, are different for each browser, leading to some confusions. Here is one example: to define the border bottom left radius value, Mozilla uses a single word “bottomleft” different from the other two using a dash to separate the words “bottom-left”.

But after giving a try I ended up creating this little panda which I have called “CSS3 Kung Fu Panda”, 100% made with CSS. Click here to see it.

Lists are really tricky elements to theme. The main reason is that a list is not just one item where you can apply properties directly, is a mix of them. So, a simple unordered list markup will look like this:

<div id="navigation">
   <ul>
      <li><a href="#">Link One</a></li>
      <li><a href="#">Link Two</a></li>
      <li><a href="#">Link Three</a></li>
    </ul>
</div>

As you may notice, lists are usually placed into a div that will help with the styling. You can add padding or margins to move the list or simple to add some background to the whole area.

How to center it? Use the previous markup with the following CSS:

#navigation {
	margin-top:30px;
	height:40px;
}
 
#navigation ul{
	padding: .2em 0;
	margin: 0;
	list-style-type: none;
	width: 100%;
	text-align: center;
}
 
li {
	display: inline;
}
 
li a{
	text-decoration: none;
	padding: .2em 1em;
	color:#000;
	font-size:20px;
}

Click here to see the result!