The hidden power of border-radius

Circles and Curvy Shapes with CSS3

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.

Read more

Web designs with exceptional forms of navigation

Beautiful browsing.

There are a number of showcases demonstrating creative navigation throughout the design community. Despite this, the majority of them just showcase nicely designed horizontal and and vertical menus. Of course, they were probably creative at some stage. However, some web designers test the laws of usability and like to experiment with design. Today, I have showcased over twenty stunning forms of navigation in website design. I hope these websites inspire you to forget all forms of current navigation and to design new, better and improved ways of navigating websites.

Read more

Contact form or mailto link?

Contact Form FTW

Whilst visiting various websites it has come to my attention that only about half use contact forms. The websites that don’t instead supply a mailto link which then opens an email client. Why do some websites choose to use a mailto link rather than a contact form? Is it because they’re too lazy to design and code a contact form or is it because they feel contact forms are unnecessary when you have well developed and easy to use email clients such as gmail. I am sure there are various reasons to why websites choose to display a contact form or supply an email address, but in this article I will be telling you why contact forms are the way to go.

Read more

The six fundamental ways of adding depth to your designs

“It is not length of life, but depth of life.” – Ralph Waldo Emerson

The typical web design, you will notice, has advanced a considerable amount since the days of the animated and somewhat awfully designed geocities websites. With the improvements in the markup languages HTML and CSS and the incredible graphic software now available, website design has become an industry in itself. It is therefore important to stay up to date with the latest trends and to also to be imaginative and to spark new ones. It is because of this that many people have begun to experiment with depth, this article will take a long hard look at depth and explain various ways in which it can be achieved.

Read more

Create a funky most commented section for your blog!

Snaaazzzy!

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.

Read more

Design a pixel perfect menu – MetaLab style

thumb
Perfection

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.

Read more

35 Websites that use transparency effectively

24ways
I can see-through!

Everywhere we go we see transparent objects. So why not implement transparency in web design? If you’ve just made the best background ever but have to cover it all up with content, then why not make that content slightly transparent? Transparency is great for adding depth to a website. The more transparent an area is, the more it seems closer to the area behind it. This can be used to a web designer’s advantage.

Read more

Fixed elements in web design with examples

bulletpr
Sticky!

From time to time it’s nice to try something different. A typical website layout may have an awesome design but nothing truly creative. Positioning is a vital part to web design. From where you put the navigation menu to the area dedicated to twitter, correct positioning is essential for a good user experience. So, some web designers have taken a step back and thought, I need this area to be permanently displayed but not these other areas. Whilst writing this I find myself wondering why all navigational menus are not permanently displayed. Surely, if you had the ability to go to another page without scrolling, this would lead to much faster browsing?

Read more

Excellent E-Commence Website Designs

made590
Exquisite Design!

With the internet getting more and more popular every year, many people have started to build up businesses and sell products and services. These site are know as E-commence sites and they continue to grow. I myself regularly enjoy visiting the fantastic envato marketplaces. If you are talented the why not try making some money? I hope you enjoy these awesome E-commence site designs!

Read more

20 Crisp Website Designs

designbits
Pixel Perfect!

One of my favourite types of design is crisp or sleek, which you may have realised from Creativityden’s design. The pixel perfect borders and the subtle gradients look perfect and the design gives off a flawless impression. In my opinion, this type of design provides the perfect base for housing your content. The reader is not distracted by the design and so the content is emphasised. After hours of searching, I believe the sites showcased here are the best of the best. Hope you enjoy them!

Read more