The property

.round
{
    border-radius: 5px; /* all corners have a radius of 5px */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    border-radius: 5px 4px 3px 2px; /* corner values go clockwise so, first value is the top left, second, the top right, third, bottom right and fourth, bottom left */
}

Jean of Cats Who Code recently wrote an excellent article which included ways to achieve rounded corners in IE.

Circles

A filled circle

To render a circle using the border-radius property, simply set the border-radius value to half the width/height. Both width and height should be the same.

A beautifully rendered circle.

#circle
{
		width: 200px;
		height: 200px;
		background-color: #a72525;
		-webkit-border-radius: 100px;
}

A bordered circle

An unfilled circle with border

#circle
{
		width: 200px;
		height: 200px;
		background-color: #efefef; /* Can be set to transparent */
      	border: 3px #a72525 solid;
		-webkit-border-radius: 100px;
}

Due to the way border-radius doesn’t curve the filled area as well, values for border thickness work well up to 4-5px depending on the size of the circle.

Examples of circles with different borders

An unfilled circle with a dashed border

#circle
{
		width: 200px;
		height: 200px;
		background-color: #efefef; /* Can be set to transparent */
      	border: 3px #a72525 dashed;
		-webkit-border-radius: 100px 100px 100px 100px;
}

Semi Circles and Quarter Circles

Semi-circle

To create a semi circle, the width value most be half of the height value. The radius border for the top left and bottom left or top right and bottom right then have to have a value greater than that of the width. A semi-circle of the top and bottom section work much in the same way but with the height being half of the width and with the bottom right and bottom left or the top right and top left have values greater than the height

Look! A semi-circle

#semicircle
{
		width: 100px;
		height: 200px;
		background-color: #a72525;
		-webkit-border-radius: 200px 0 0 200px;
}

Quarter circle

Very simple to achieve, just set a corner value to the same value as the width/height.

A quarter circle.

#quartercircle
{
		width: 200px;
		height: 200px;
		background-color: #a72525;
		-webkit-border-radius: 200px 0 0 0;
}

With different borders

Same border techniques can be used.

Overlapping

By overlapping two circles you can create some interesting shapes. When overlapping make sure the shape on top has the same colour as the body background colour. You also need to use the position and z-index property to position one circle above the other. Z-index simply relates to layers. An element with a z-index of 1 will overlap an element with a z-index of 0 so long as they are positioned on top of each other.

Produce a wonderful arch effect

	#wrapper
	{
		width: 1000px;
		margin: auto;
		position: relative;
	}
	#circle
	{
		position: absolute;
		top: 100px;
		left: 0;
		z-index: 0;
		width: 200px;
		height: 200px;
		background-color: #a72525;
		-webkit-border-radius: 100px;
	}

	#circle1
	{
		position: absolute;
		top: 105px;
		left: 5px;
		z-index: 1;
		width: 200px;
		height: 200px;
		background-color: #efefef;
		-webkit-border-radius: 100px;
	}

Have some fun

These are just a couple effects that I managed to achieve. I am sure you could produce some exceptional art using these techniques. Why not give it a try?

Moon

A nice little crescent moon

Colour venn diagram

A Venn Diagram

65 Media

65 Media are group of passionate individuals that produce fantastics experiences. They have creativity running through their vains, just take a look at their fantastic homepage:

65 Media

Carefully Considered

There are a few websites out there that use a horizontal layout, Carefully Considered is one of them. However, I like how they have made browsing effortless, just click to the right to view the next project and double click to read about the project.

Carefully Considered

Fauborg

A great website that allows you to browse both horizontally and vertically smoothly by dragging and dropping.

Fauborg

Gritti Rollo

Gritti Rollo has demonstrated how simplicity can be perfect navigation. Along side some beautiful hover effects and revealing areas with jQuery, Griiti Rollo has produced a fantastic and inspiring website.

Gritti Rollo

Daniel R Leyva

Daniel is someone who clearly has lot of creativity. He has mastered the parallax effect supplied by the jQuery library and created a 3D environment in which to browse the content. I feel with a background image containing a little perspective would work wonders with this design.

Daniel R Leyva

Organic Grid

Organic Grid have taken a similar approach to 65 Media (vica versa), a simple vertical menu with a gradient of backgrounds. With some beautiful sounds complimenting the mouse over and beautiful transitions throughout the website, it is a joy to browse.

Organic Grid

Khai Liew

Khai Liew has gone for the horizontal but vertical approach. Although it can be hard to read the menu item names without tilting your head slightly, the design alongside beautiful transitions is incredibly unique.

Khai Liew

Young

When looking at Young for the first time, you predict that it scrolls horizontal, however with no horizontal scrollbar appearing, you begin to question yourself. However, once hovering over work you notice the black bar thicken; indicating that it is a scroll bar, very stylish.

Young

Hello Goodlooking

There are very few websites that try something totally different. Hello Goodlooking is one of the few. Navigation is based around a mind map design. Menu items are clicked to reveal new items and content. A stunning example of creativity using Flash.

Hello Goodlooking

WallSwaps

Wallswaps is a great idea procured by Erskine Design. It is a virtual cork board where companies and designers can add their work, business cards and a lot more. A beautiful idea with some exceptional navigation.

WallSwaps

Screen Vader

Now this site is a must see! I am yet to see any other site demonstrating such enormous creativity.

Screen Vader

IAAH

Another click and drag site, but unlike its counterparts it is incredibly smooth. It is a joy to navigate and I am sure you will spend just as long as I did browsing the site.

IAAH

Daffy’s

Daffy’s take a look at traditional navigation techniques and just pushes them aside. Mouse over each menu item to reveal a a description and entirely different background image.

Daffy's

Frost Design

Frost Design have developed and smooth coverflow type navigation to display their work. Incredibly smooth and incredibly effective.

Frost Design

All about Photography

Another click and drag website, however this site use the google maps navigation methods to browse the website. Unsure how they implemented this so hats off!

Henriette Primus

Joshua Distler

Josh takes a different approach to typical web design. Based around a grid, the main homepage is made up entirely of navigation withe each menu item taking up a different amount of blocks. Not sure what determines how many blocks an item takes up but nonetheless a very creative design.

Joshua Distler

Design is Kinky Studio

A website that allows the user to browse both horizontally and vertically, by hovering the cursor over the arrows positioned at the edges of the screen. Also allows you to zoom in and out.

Design is Kinky Studio

BBH

Flash just blows my mind sometimes. The BBH homepage features a rotating world in which to navigate. One can position the mouse around the screen to determine which way the world rotates or one can click the world and drag yourself around its surface. What’s more impressive is the exquisite transitions throughout the website.

BBH

Fons Hickmann m23

Not just a standard jQuery scrollto website. Fons Hickman m23 has a lot of creative nooks and crannies to seek out.

Fons Hickmann m23

Margaret London

Beautiful navigation and transitions.

Margaret London

Thibaud

Probably the most creative navigation I have ever seen. How was this achieved? By finding inspiration from objects and the environment around. Get outside once in a while, don’t let the CSS galleries plague your mind.

Thibaud

Nick Jones

Nick demonstrates how a vertical menu can be both appealign and fun to browse through.

Nick Jones

Established

What seems to be just a large vertical menu, actually contains the content as well. Click on the arrow to the right of each menu item to have the content smootlhy scroll in.

Established

24 ways

Athough 24 ways is comprised of just horizontal and vertical menus, it is the way they have been made that demonstrates creativity. With full height and translucent backgrounds the end result is very appealing.

24 ways

Christopher Hewitt

The simplest navigation you will probably see. Chris shows how effective a simple list can be. Check out the gorgeous filtering as well.

Christopher Hewitt

Alp Tugan

Similar to Hello Goodlooking, Alp Tugan’s navigation is based around mind map design.

Alp Tugan

Zachary Pulman

Zachary has designed and developed a masterpiece. I’m sure you will have as much funs navigating through his website than I did.

Zachary Pulman

Wonderwall

Probably not the most practical navigation, but still damn impressive!

Wonderwall

Be creative

Easier said than done, no? If you find it tricky to ‘think outside the box’ don’t revisit the same CSS galleries over and over, they will only prevent your creativity from developing, instead they will lead you to copy. Many of the web designers above have taken notice of their environment and the objects that it consists of. They have determined what feels natural and have developed them suitable for web design.

What is your favourite form of navigation from the list above?

What inspires you? How do you find inspiration?

I look forward to your comments.

Email can be a bit boring

Everyday we log onto the same client to see what emails we have received over night, for some, it is exciting to see what news and discoveries await. However, for the majority, checking you email can be a chore. A chore that we like to procrastinate over and try to ignore as much as possible. When supplying a mailto link, you are simple directing your potential client to where he would least likely to go, his email cave. Where his idea of a new awesome website that he would like you to design is shrouded with normal life of day to day emails.

Ugh more emails...

I have only suggested that many people do not like to check their email due from the various negative tweets I have come across. I would definitely say responding to emails can be a chore however, I don’t think it would have a huge affect on a potential client. That said, I believe a beautifully designed and built contact form would be much better to include than a simple mailto link.

Use a contact form

I would therefore recommend using a contact form. When the potential client has finished browsing your work and is thinking about contacting you, first of all the size of the contact form is more likely to catch the client’s eye than small link to your email. Furthermore, a lot of people continue to talk about how making a good first impression is essential. In my eyes the last impression should be just as important as the first. When the client comes to the end of his/her browsing and is considering whether you are the ‘one’, by putting a large contact form in front of them instead of a tiny link. You may find yourself receiving a few more extra clients every so often. However, this is only if the contact form is perfect(-ish)!

Important things to note

To create the perfect contact form, various objectives must be achieved. Perfect alignment. A good color palette. Correct Size for input boxes and uniqueness and creativity.

Alignment is crucial!

Alignment

With the number of input boxes used in contact forms, it is essential that they are each one is aligned. Unless of course you have created a creative layout which leads me onto a topic which I hope to discuss soon, Creativity versus Usability.

Size is very important.

Size

When it comes to size I don’t understand why some websites have a tiny message box, sometimes the height can be the same as the name and email boxes above?!. A message box should be at least ten times the size, it is the most important part of any contact form. The reader should be free to write as much as they want without feeling cramped. Of course, some browsers allow you to expand the text area yourself, but why put the reader through the effort? Why make them expand a text box that will potentially break you site?

Use contrasting colors.

Color

As always, color plays an important role. It is important to make sure that the contrasting colors are used for the background of the input boxes and color of the text. So the reader does not experience any strain.

Use your imagination.

Uniqueness, Creativity

When using your form, there has to be something that stands out, something that provides a little flair. A typical contact form will have each input box below the other, with a submit button at the bottom. Maybe try to experiment with different layouts, positioning input boxes, labels and submit buttons in different locations. I have endless ideas when it comes to this sort of stuff, if you need any help just leave a comment.

Analyzing great contact forms

There are probably a number of ‘awesome’ contact forms out there (if you find any please leave a comment), but I have only taken two and explained why they almost perfect.

Vuu Media

Vuu Media

Alignment – As you can see with Vuu Media’s contact form all elements are perfectly aligned. Padding and margins stay consistent through out and overall the layout and structure gives a nice flow to the form.

Size – Input boxes for names, email and telephone are correctly sized. The subject input box and and message text area are also perfectly sized. Throughout the form, the reader has enough space to fill in the labelled inputs. The size of the message box also allows the reader to write a decent amount of text before it is filled up.

Color – Labels are well defined. Strong text for defining different areas of the form, light blue text to inform the reader of the required inputs and a nice darkish gray for the standard input box labels. The background color of each input box also has a nice mouse over color also. I like this, however I believe the light gradient is easier to type on then the blue background.

Uniqueness, Creativity – I like the way has David has added depth to his input boxes. The contrasting top and bottom borders combined with an inner shadow gives a perfect recessed look. I also like how he has added some extra information to the right. However, it would be nice to see David adapt his design slightly so that the message text area can be expanded (using the integrated browser function) whilst still retaining the design. The submit button is also great but I feel it deserves an active state.

Sam Brown

Sam Brown

Alignment – As mentioned above, alignment can be ignored if the design has a creative layout. Sam brown has managed to align all but two input boxes but this is only because of the two full stops/periods he has used.

Size – Absolutely perfect

Color – Transparency works very well. However, I do feel the text color could be little brighter.

Uniqueness, Creativity – I have never stumbled upon a contact form such as this. Sam has done an excellent job with the design and has also produced a unique template type contact form where you just fill in the gaps.

Other great contact forms for your inspiration

Icondock’s contact form is perfect. It may not be creative or unique but it’s what everybody should learn from and build on:

Icondock

Grooveshark

Giraffe

TVI Design

Fubiz

Orman Clark

Summary

Mailto links aren’t necessarily bad, but they don’t show off any of your creative flair. Like sidebars I do feel like contact forms are neglected. I have found numerous websites with bad contact forms, and concluded that only around 10% turn out to be good. (Even CreativityDen’s is rubbish :/ ). It would be nice if we could all take a little more time when it comes to our contact forms and forms in general. Forms may be the only interaction you website has, so it is essential that a good user experience is achieved.

A few questions

What are your views on contact forms and mailto links?

Where do you think the submit button should be positioned, on the right or left?

Do you think the size of the message box should be larger in width and hight than input boxes for name and email?

Can you think of any alternative ways? (I just thought, perhaps you could allow people to leave audio or even video messages?)

For the past few years now, web designers have been adding depth to their designs. What is depth? Well in terms of perception which will be my main focus today. Depth perception is is the visual ability to perceive the world in three dimensions (3D). Now of course this is impossible when it comes to design on 2D surfaces. Nonetheless, we can still simulate the effect using various methods.

William of Tyre was one of the first men that attempted to add depth to his work

But why would we want depth in our designs? Depth can be useful a tool for distinguishing certain areas of you website. When you used well you can even divide your design into layers, one layer being in the foreground, another in the background and any in between. With layers, content that appears in the foreground is given a focus and emphasized, whereas the opposite effect applies to the background.

1. Perspective

Perspective can be great for guiding the reader to a particular element. In the following example we notice how the designers at Flourish have used perspective to make the tree the focal point of the page. Along with some beautiful jquery, the site interacts with the reader well. However, when emphasizing an important area or element it is essential that other areas of the same importance do no suffer an deemphasis (unless that in the attention). I believe Flourish have done an excellent job in putting focus on the tree and their design views, however because of this I believe their slogan and logo just above isn’t given the attention it deserves. Nonetheless, a great example of perspective in web design.

Flourish Web Design

Nine Flavours have also used subtle perspective to add emphasis to their logo. The background appears recessed and so the logo (thanks to a drop shadow) is brought forward.

Nine Flavours

Daylight Touch throws in a bit of perspective by adding a 3D Iphone image. You will notice the Iphone facing to the right and so its vanishing point is also to the right. This guides the reader’s eye to the product name and then the two call to action buttons below.

Daylight Touch

2. 3-Dimensional graphics

During 2009 a handful of designers who were daring enough to experiment with depth decided to add 3 Dimensional graphics to their designs. The result was positive and led to a popular trend that involved folding, the same effect seen when folding a piece of paper or card.

The beautiful fold technique

From the Couch

There are two types of folding, rigid and curved. Curvy gives the impression of flexibility and to me, relaxed. The guys over at From the Couch have done an excellent job in demonstrating the beauty of curved folds. Some sites can sometimes go over board with this technique but I believe Marc and David have been spot on here. I particularity look how the shine effect continues around the fold.

Yoast

Rigid folds give the impression of precision. Yoast is a great site demonstrating how a simple fold can add depth to a website. The site also demonstrates how a site can have layers, you should be able to count five. Layers is what depth creates. The layer that appears on top of all others is the most prominent and therefore emphasized (foreground). Whereas the bottom layer (background) usually contains less important information. Each layer tends to be differentiated from the other by a change in colour or opacity. Remember, when adding depth to any website to design, be sure to give the correct areas emphasis.

The fold technique became so popular everyone had a go at it:

Other fold examples

When i came across cubescripts I just had to include it in this article. The perspective used to the right of the design does not add any emphasis or focus to the design but it makes a change from the standard 2-D designs that we see day to day.

A very 3-Dimnesional design!

Illustrations

Sometimes, a ‘simple’ 3D illustration or graphic can be enough to add depth. However, bare in mind they will be the center of attraction so it is essential to keep quality high and mistakes few.

Positive Hype

Synch Media

Not only do 3D illustrations add depth and clarity to a website design they can also add character. As soon as the reader lands on your page they will make a snap judgement as to the style of the site, it’s purpose and subconsciously, will this site benefit me. A friendly and inviting illustration can be a great first impression. Synch Media have produced a firendly robot design that instantly gives them an ‘image’. After visiting the website you are most likely to remember it because of the distinguishing robot.

Creative Increase (below) is another great example of a 3D illustration that adds depth, with the help from perspective edges on either side:

Creative Increase

3. Shadows

Shadows are another factor that can add depth to your web design. Be it inner or drop, either will give the impression that an object/element is recessed or hovering. Drop and inner shadows are so powerful that even the most subtle one pixel line can lift an element off the page. Henry Jones over at Web Design Ledger wrote an excellent article talking about exactly that, Adding Depth with Pixel Perfect Line Work.

Dissecting Metalab’s Design

When it comes to subtlety I always find myself returning to MetaLab. To demonstrate how depth is added I cropped the stylish vertical navigation. On the left you can see a 2D list, however even with a lighter colour for the selected item some depth can be seen. When we look at the entire area we notice a few things that confirm depth in the design. Firstly, the popular fold technique is used. Secondly, the point towards the right over hangs the content area on the right. I believe Metalab did not use a drop shadow because they wanted the selected area to ‘hug’ the list rather than to hover slightly above it.

Demonstrating that depth is used

MetaLab navigation demonstrating inner shadow

You will have to look closely (attention to detail) but you should notice a subtle inner shadow on selected items on the top navigation as well. This is another trend that became popular for user interfaces. When clicking a button it feels natural if the button appears recessed, by pushing down on the mouse button, you ‘physically’ push the button on the website.

A drop shadow can lift elements off the page

Here we notice MetaLab have decided to use a drop shadow. Why here? I believe their aim was to improve interaction with the reader. A drop shadow puts the are that much closer to you and entices you join their newsletter or to work with them. A little enticement at the end of a visit can be key when reeling in clients.

Tips

A few tips

4. Focus

Another method that gives your website design depth is, focus. For this we look at the way light and cameras respond to each other. I am no photographer but I do understand that a camera has the power to focus on objects at different distances. When focusing on sometihng relatively near to the camera, the background can appear blurred. Many people use this to their advantage to produce beautiful bokeh photography. When focusing on an object slightly further away, anything close to the camera will also be out of focus and blurred.

My question is, why not use this effect in web design? I am sure there are other designs that have attempted this, but the best example I could find was AWP Express. It includes both, an out of focus background and foreground. Complete with a beautiful brand illustration.

I would love to see more use of this effect in web design. I will definitely be trying it out!

A beautiful example of depth of field in web design

5. Colour Shading and Opacity

When searching for ways to add depth I didn’t realize how effective a simple colour palette can be. A good palette that allows depth will contain a mixture of dark and light colours. Dark colours can be related to the background and light to foreground. This is mainly because lighter colours tend to attract the eye whereas darker colours require a little more attention.

If we look at Versions we immediately notice the central focal point and the lovely brand illustration. When looking slightly closer we notice the background contains the same grassy hills but much darker and monochromatic. This is strong evidence that light colours are emphasized when on top of dark colours. It also concludes that colours on top of shades of black or white are emphasised. Furthermore, you will notice the dark gray hills in the background also have a slight blur. Perfect depth!

Versions

The AppStorm design also demonstrates a great use of depth with colour. The design is mostly dark gray but content is emphasised with a white background.

Appstorm, white on very dark gray. Result: Content emphasised

Similarly with Vuu Media:

I think I'm in love with this design!

6. Size and Placement

A final way to add depth is the most obvious, Size. However, size on it’s own won’t add any depth as seen in William of Tyre’s artwork. If you would like to use size to add depth then you must combine it with overlapping. If we take a look at how Symphony have showcased their CMS it appears as if the screenshots to the left are further away then the ones on the right.

Symphony demonstrating depth with size

Derek over at Valen Designs shows us how it’s done with the addition of some nifty javascript.

Valen Designs

Summary

To conclude, depth is, by all means, not essential to web design, but it does give your design a bit of flair. I have discussed six ways in which you can achieve depth with each being fairly easy to apply. I am always a fan of large illustrations that make me stare, it usually leaves and good first and last impressions so I would thoroughly recommend those. As mentioned, I would also like to see the design community playing with depth of field, AWP pulled it off and produced a stunning design so why can’t you? I hope you have enjoyed the first article of the new year. My plan is to stay consistent, so future articles will be of the same quality

Colorful comment section

The colorful comment section developed and designed for wordpress blogs.

Colourful comments

Querying and displaying the most commented posts

The code is fairly simple. Firstly, it queries the database, finding the x most commented posts between two given dates. It then loops through the posts calculating the width and color of each post. I have tried to make the code as readable as possible, but if you have any problems do not hesitate to leave a comment. I am currently learning php myself so anyone who can improve this code, please share your improved version

My Version

My attempt is referred to as ‘spaghetti code’ – don’t use it! Instead use Dylan’s improved version below mine. I shall leave my version up so you can see the mistakes I made and how Dylan cleaned my mess up.

<h2>Most commented</h2>

<ul id="most_commented">

<?php

#Fetch the five most commented posts between the 1st of January 2009 to the 31st of December 2009
$result = $wpdb->get_results("SELECT comment_count,ID,post_title, post_date FROM $wpdb->posts WHERE post_date BETWEEN '2009-01-01' AND '2009-12-31' ORDER BY comment_count DESC LIMIT 0 , 5");

#Declare counter variable
$i = 1;

#Loop through each post
foreach ($result as $topfive)
{
    $postid = $topfive->ID;
    $title = $topfive->post_title;
    $commentcount = $topfive->comment_count;

    #My hacky way of finding the number of comments on the most commented post
    if ($i == 1) {$mostcomments = $commentcount;}

    if ($commentcount != 0)
    {

    #Display our results
    echo '<li style="width:';
    #Determine the width for each post, the width of my sidebar was 260px, you will need to change this value to the width of sidebar (don't forget padding etc).
    echo round((260/$mostcomments)*$commentcount,1).'px; '; 

    #Change the color for each post - hex values - change these values to have different colors
    echo 'background-color:#';
    if ($i == 1) echo 'c32a2a';
    elseif ($i == 2) echo 'c37d2a';
    elseif ($i == 3) echo 'bac32a';
    elseif ($i == 4) echo '8fc32a';
    elseif ($i == 5) echo '4ec32a';

    echo ' ;"> ';

    #Display the post title with a link to the post
    echo '<a href=" ';
    echo get_permalink($postid);
    echo ' "> ';
    echo $title;
    echo '</a>';

    #Display the comment number
    echo '<div class="comment_no">';
    echo $commentcount;
    echo '</div></li>';

    }

$i++;

}

?>

</ul>

Dylan’s much improved version

<h2>Most commented</h2>

<ul id="most_commented">

<?php

# Fetch the five most commented posts in the last 12 months
$result = $wpdb->get_results("SELECT comment_count,ID,post_title, post_date FROM $wpdb->posts WHERE post_date BETWEEN NOW() AND DATE_SUB(NOW(), INTERVAL 12 MONTH) ORDER BY comment_count DESC LIMIT 5");

# Initialize $mostcomments
$mostcomments = FALSE;

# Initialize the colors.  Change these values to have different colours
$colors = array(
	'#c32a2a',
	'#c37d2a',
	'#bac32a',
	'#8fc32a',
	'#4ec32a');

#Loop through each post
foreach ($result as $i=>$topfive)
{
    $postid = $topfive->ID;
    $title = $topfive->post_title;
    $commentcount = $topfive->comment_count;

	# store the most comments in the first iteration, as a non-zero value evaluates to TRUE
	$mostcomments = ($mostcomments) ? $mostcomments : $commentcount;

    if ($commentcount != 0)
    {
		#Determine the width for each post, the width of my sidebar was 260px, you will need to change this value to the width of sidebar (don't forget padding etc).
		$width = round((260/$mostcomments)*$commentcount,1).'px; ';

		# use $i to correlate to an element in $colors rather than 5 if() statements
		$background_color = $colors[$i];

		# Get the permalink for this post
		$permalink = get_permalink($postid);

		# Use heredocs to output, to save on 1001 echo statements
		# Closing COUNT; is intentionally indented weird (see docs for why)
		echo <<<COUNT
			<li style = "width:$width;background-color:$background_color;">
				<a href = "$permalink">$title</a>
				<div class = "comment_no">$commentcount</div>
			</li>
COUNT;
    }
}

?>

</ul>

I decided to insert this code into my sidebar, however you can put it anywhere on your blog.

Add a little CSS

#most_commented a {
        color: #000;
        font-size: 14px;
}

#most_commented a:hover {
        color: #fff;
}

#most_commented li {
        position: relative;
        min-height: 40px;
        opacity: 0.9;
        margin: 0 0 -15px 0 !important;
        padding: 15px 10px 15px 10px !important;
}

#most_commented li .comment_no {
        position: absolute;
        top: 12px;
        right: -11px;
        padding: 5px;
        color: #efefef;
        background-color: #101010;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
}

Done! Easy as pie

Stay tuned! I plan on implementing this for most viewed posts and most tweeted/dugg posts

Step 1

Let’s get started! Boot up photoshop and create a new canvas. Set width to 550px and height to 250px. Press OK and you should have a brand spanking new canvas ready to draw your pixel perfect menu. If the canvas doesn’t have a background then go ahead and press Shift + F5 and fill the layer to white. I added a radial blur to spice mine up a bit.

Start off with a nice background

Step 2

Grab the marquee tool (M) and draw a rectangle from one side two the other. Create a new layer by pressing Ctrl + Shift + N and fill the area with any colour. Double click the newly create layer and add a gradient overlay. I chose a linear gradient with a dark and lighter shade of red. Also add a black outer stroke, and set opacity to 90ish percent (if you used different colours for your gradient overlay then you may have to lower this).

Add a background for our menu

Step 3

To add a shine to any object in photoshop is fairly simple. Hover your cursor over the thumbnail of the menu background layer whilst holding Ctrl. The cursor should change to a one with a dashed box on top of it. Left click to select the area of the menu background.Now grab the marquee tool, hold alt and draw a rectangle that covers the bottom half of the menu background. You should now just have the top section selected. Create a new layer, fill the selection with white and reduce opacity to 2%.

Add a shine

Step 4

Now onto the menu itself, select the rounded rectangle tool (U) and draw a button onto your menu background. The colour of the rectangle is up to you. I just made mine a lighter shade of red. Now to add some crisp borders. Double click on the rounded rectangle layer and add a white outer stroke and reduce opacity down to around 20%. Now add a black inner glow with the opacity set to 80% (again, play with these values until you’re satisfied). Set the choke to 100% and size to 1. I also added a gradient overlay, from dark to light red (very subtle).

Add a pixel perfect button

Step 5

To make the selected/pressed state you just add a black inner shadow with an opacity of 60%, angle of 90 degrees, distance of 3 and size of 3. Add some text with a black drop shadow, an opacity of 20%, distance of 1, spread of 100 and size of 1.

Add an inner shadow

Step 6

To make the normal state, select the area of the button using the method in step 3. With the button selected click on select from the top menu, choose modify and then contract. Contract the selection by 1px. With the gradient tool (G), select or create a gradient that starts from white with 100% opacity to white with 0% opacity. In a new layer, draw this gradient from the top to the bottom of the selection. Now contract the selection again by 1px and press the delete key. Set the layer to overlay and reduce the opacity until you are happy.

Add another pixel perfect button, this time with a shiny edge

Step 7

Repeat steps 4,5 and 6 to add more buttons to the menu and that’s it! Easy I hope you enjoyed this tutorial. If you have any queries then please feel free to leave a comment. I will try to respond as soon as possible.

Continue to add buttons for each link

What are fixed elements?

Fixed elements are sections of a website that stick to the page when you scroll. They are fixed because their position is in relation to the screen rather than the webpage. Take a look at the example below. Mark Jardine successfully demonstrates a fixed section on his website. As you scroll, you notice the left side of the website stays stationary while the content scrolls normally.

Mark Jardine

To have fixed elements or to not have fixed elements?

So why do web designers decide to have these fixed elements? Well there are various reasons why you might want an area or section of website to be visible at all times.

Outlaw Podcasts

1. Emphasis. A fixed element is immediately noticed when the user begins to scroll.
2. Navigation. Being able to navigate to different pages of a website whilst half way down a page can very useful and improve browsing.
3. Advertising. To be certain an advertisement is viewed.
4. Displaying latest posts/news. So the reader can instantly view the latest updates.

Use fixed elements wisely...you must.

However, never overuse fixed elements. Too many can spoil your website leaving it harder to read. In fact, in my opinion no more than two should be used. The more fixed elements you have, the less space your website has to breathe. Furthermore, it’s important to pay close attention to the size of the fixed element. A large fixed sidebar may not leave enough room for your content. Always take into account readers with the screen size 1024×768 and how much space they will have available to view your content. Finally, if you plan on having a fixed element that does not hug one of the sides be aware that it may cover up some of your content. This can be very frustrating when reading through a post, especially if there is no way to remove it.

How can I implement a fixed element?

It’s fairly simple to implement fixed elements. The CSS property “position” has a value “fixed” which can position selectors (tags e.g <div></div>) in relation to the screen.

position: fixed;

Fixing an element to the top of the screen

position: fixed;
top: 0;

Fixing an element to the left of the screen

position: fixed;
left: 0;

Fixing an element 50px from the right of the screen

position: fixed;
right: 50px;

Fixing an element 200px from the bottom and 10px from the left of the screen

position: fixed;
bottom: 200px;
left: 10px;

If you would just like to have a background that doesn’t repeat and stays fixed when you scroll then you can use this css:

background: #fff url(insert-url-here) no-repeat fixed;

An excellent example of a fixed background is Webleeddesign. Bryan combines a fixed background with transparency to create a wonderful effect.

webleeddesign

Further Examples

Grow Media

Total Resistance

Design Comission

Envato

Bulletpr

Stefan Minning

Trend Wolves

Gilbert Pellegrom

Ryan Johnson

cdharrison

Icon Dock

Sean Geng

welcomebrand

Adelle Charles

Further Reading

CSS Fixed Menu – Pinned-Down Style
Creating a Floating HTML Menu Using jQuery and CSS
CSS Floating Menu
How to Add a Fixed Position Banner to a Website
Absolute, Relative, Fixed Positioning: How Do They Differ?
Web Design 101: Positioning

Video Hive

Pure Volume

OQVestir

Cloth Moth

Crate and Barrel

Misery

Shoe Guru

Oakley

Woo Themes

Hello Themes

Icon Buffet

Behance Outfitter

Icon Dock

One Hub

RY.

Made590

Design Bits

Design Bombs

Design Link

Not By The Hour

Mail Chimp

Modal

OH! Media

PSD Layout

PSD to WP

Rainfall

ReadWhale

Saturized

Smart Cube

Sohtanaka

STUDIO7DESIGNS

Tutorial9

Tutsplus

VisualBox

Yoast

From the couch

Thanks to all the incredible designers who created these websites.