So hopefully after reading – Understanding CSS – Padding, Positioning and CSS3 – you understand the basics of CSS and have been experimenting with other properties. It is important to remember that some properties will allow you to achieve effects that aren’t necessarily stated. In this post we will explore the property border-radius and how it can be used to create circles, semi-cricles and quarter-circles. It also has the potential to produce some terrific designs using just CSS – no images.

As my first CreativityDen post I’ve decided to show you all, (mainly beginners to CSS), how to use it effectively in you designs. One of the most frustrating things when coding a website can be not having the skills to bring your .PSD file to life, it happens to most of us, (unless your like me and you learnt to code first), but it doesn’t have to be that way anymore.

These methods are trial and error, not every effect works in every design, which is why not every well done site has drop shadow and rounded corners everywhere, so be careful when and where you use them.

Grid-based layout is probably the more preferred way to style up a webpage to give it more magazine-like look and feel. This tutorial is about how to use CSS and Javascript to create a fluid grid-based layout (See demo here). The algorithm/procedure used in this tutorial is very simple and straightforward. There are more advanced algorithms out there which can handle multiple scenarios. But the purpose is to understand the basic logic on how to create such layout. So here it goes…

After Engadget redesigned their website a few weeks ago, I noticed how their sidebar contained some unique methods of displaying posts. A nice featured posts section, a fancy calendar and an awesome most commented, digg and twitter section. Using the amount of comments to determine the width and having each post a different color to produce a rainbow, I thought was an awesome idea. So I had a go at making the most commented section for CreativityDen. It turned out pretty well, so I decided to share it with you! All credit goes to Code and Theory.

I’m a big fan of pixel perfect design. So much so that whenever I visit MetaLab’s website my jaw drops in awe. The attention to detail is unbelievable. So I tried to replicate the style by designing a pixel perfect navigation menu. I was surprised at how easy it was to produce replicate , it’s because of this that I decided to write up my process. If you’re into this type of design then I strongly recommend reading this tutorial. It should definitely get you on the right track.