Community Project: Style an Unordered List

We’re going to try something new today, something which I hope you’ll all get involved with: I want you to show off! I’m going to give you a simple piece of markup (an unordered list) which you’re free to style in any way you please. Send your CSS over and worthy examples will be published on the site next week. Read on to find out more!

Update!

You can now check out the results if you fancy :)

This is Easy

Here’s the markup (download it wrapped up as an html file if you want):

<ul>
	<li><a href="#">Cheese Sandwich</a></li>
	<li><a href="#">Melamine</a></li>
	<li><a href="#">Intrigue</a></li>
	<li><a href="#">Shrubbery</a></li>
	<li><a href="#">Chat</a></li>
</ul>

What do you think you could do with it, using the power of CSS? Here are two really basic examples, just so you get an idea of what we’re doing here.

Anything Goes

You can’t touch the HTML, without exception. But there’s loads you could do to style this list via CSS!

• Play with the colors
• Alter the fonts (use @font-face if you want)
• Structure it as a menu
• Add some dynamic content with pseudo elements
• Go mad with gradients
• Blow us away with transitions
• Even use textures and images if you want (just make sure you zip the whole lot up when you send it over)

The only thing you need to bear in mind is that the demo page already has its styles reset with normalize.css.

Sign Me Up!

This couldn’t be simpler:

• Download the basic files
• Alter the styling in any way you want
• Include any personal details and a description about what you’ve done
• Zip your file(s) up and send them to me!

I’ll publish the best ones when I’ve collected a few. This can be on-going too – there’s no deadline. If it’s a success (let me know what you think in the comments) then we’ll hold progressively more challenging Community Projects further down the line..

I look forward to seeing what you all come up with! Good luck!