Stiern

Create a Cool Messy List with CSS3 and nth-child

While working on a design recently, I stumbled upon Chris Coyier’s article How nth-child Works. Chris shows us the basics of the nth-child pseudo-selector in CSS. It can be used for so many things, but in this short tutorial I’m going to show you how to create a cool messy list.

First, check out the demo to see what we’re creating in the demo.

We’re going to start with an HTML5 document (why not?), and include a stylesheet, as shown below:

<h1>Messy List</h1>
<!DOCTYPE HTML>
 
<html lang="en">
 
<head>
	<meta charset="utf-8">
	<title>Messy List</title>
	<link rel="stylesheet" href="style.css" />
</head>
 
<body>
 
	<header>
		<h1>Messy List</h1>
	</header>
 
	<section>
 
		<ul>
			<li>Lorem ipsum dolor sit amet</li>
			<li>Duis aute irure dolor in reprehenderit.</li>
			<li>Excepteur sint occaecat cupidatat.</li>
			<li>Ut enim ad minim veniam.</li>
		</ul>
 
	</section>
 
	<footer>
		<p>Copyright &copy; 2010</p>
	</footer>
 
</body>
 
</html>

That’s a pretty simple HTML document—and of course the most important part is the list. Next, here’s the stylesheet (with an HTML5 CSS reset in it as well). You can get the background from SeamlessTextures. I’ve modified it in color and size, so you can also just get my version.

/* HTML 5 Reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small,  strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
 
body {
	line-height: 1;
}
 
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
section, article, aside, header, footer, nav, dialog, figure {
	display:block;
}
 
body {
	background: url(background.png);
	width:600px;
	margin: 40px auto 0;
	font-family: Georgia, serif;
	color: #333333;
}
 
h1 {
	font-size: 3em;
	margin-bottom:1em;
}
 
ul {
	list-style: none;
}
 
ul li {
	padding: 8px 15px;
	margin: 10px 0;
}
 
ul li:nth-child(odd) {
	background: rgba(50,50,50,0.1);
}
 
ul li:nth-child(odd):hover {
	background: rgba(50,50,50,0.3);	
}
 
ul li:nth-child(even) {
	background: rgba(50,50,50,0.3);
}
 
ul li:nth-child(even):hover {
	background: rgba(50,50,50,0.5);
}
 
ul li:nth-child(3n+1) {
	-webkit-transform:rotate(-0.6deg);
	-moz-transform:rotate(-0.6deg);
	transform:rotate(-0.6deg);
}
 
ul li:nth-child(3n+2) {
	-webkit-transform:rotate(0.5deg);
	-moz-transform:rotate(0.5deg);
	transform:rotate(0.5deg);
}
 
ul li:nth-child(3n+3) {
	-webkit-transform:rotate(0.2deg);
	-moz-transform:rotate(0.2deg);
	transform:rotate(0.2deg);
}

I guess there’s not much new for you here, but let’s break it down a bit anyway. First, we define the width of our body to be 600px. Also, we include the aforementioned background, specify font and color, and add a top margin. Next, we define the size of our H1. And now comes the fun part.

We remove the dots from our list with list-style: none;, and add a little padding to our list elements. We’ll look at the nth-child selectors in bits. Check out the first one:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul li:nth-child(odd) {
	background: rgba(50,50,50,0.1);
}
 
ul li:nth-child(odd):hover {
	background: rgba(50,50,50,0.3);	
}
 
ul li:nth-child(even) {
	background: rgba(50,50,50,0.3);
}
 
ul li:nth-child(even):hover {
	background: rgba(50,50,50,0.5);
}

We choose every second li element, and add a background to it. In this case, we choose a dark gray, and set the opacity to 0.1 (RGBA is new in CSS3), so we can see the background through the li elements. We do exactly the same for our even elements, with the opacity set to 0.3. This is just basic zebra striping. You can add several selectors to an element, so we also add a hover background color a little darker than the original element.

Next, we target 3n+1—that is, every third element, starting with the first.

1
2
3
4
5
ul li:nth-child(3n+1) {
	-webkit-transform:rotate(-0.6deg);
	-moz-transform:rotate(-0.6deg);
	transform:rotate(-0.6deg);
}

We rotate the list element by -0.6 degrees. We do the same thing for both 3n+2 (every third element, starting with the second) and 3n+3 (you get the idea). By rotating every third element, and doing zebra striping with every second element, the list seems sort of random, which, I think, is a really cool effect.

If you use Safari, Firefox or Chrome, this is what you should have:

UPDATE: You can target Opera with the following (thanks to ToMzorz):

1
-o-transform:rotate(-0.6deg);

You can also check out the demo again, or download the source code.

Thanks for reading.

29 comments

Leave one yourself

  1. very awesome tutorial … I was very lucky to find this site .. thanks .. and fantastisch..

  2. Great effect and we utilized it on our website in a few places (http://www.franklinlevy.com). But, the messy list looks choppy in Firefox. Do you know why? How can I fix this? In Chrome it looks nice and neat.

  3. ฟังเพลง

    June 12, 2010 at 2:16 pm

    *0*

    cool!

  4. Now this is something that looks urban and great :D
    Rock on Peter :)

  5. Great post Peter, but I’m trying to do an alternate comment backgrounds in WP 2.9.2 for the last three days and nothing is working. Can you point me in the right direction for something that does work with 2.9? Enjoyed your site, will be back often–

  6. You forgot about Opera 10.5:

    so correctly (check the others too):

    ul li:nth-child(3n+1) {
    -webkit-transform:rotate(-0.6deg);
    -moz-transform:rotate(-0.6deg);
    -o-transform:rotate(-0.6deg);
    transform:rotate(-0.6deg);
    }

    Btw great tutorial, used it here: http://tomzorz.me/projects/ (still filled up with dummy stuff)

    1. Thanks, dude!

      I completely forgot about Opera.

  7. Good … Use of CSS3!!

  8. wow, fantastic tutorial! too bad CSS3 is not implemented yet in IE and HTML5 also.

Trackbacks

  1. […] Create a Cool Messy List with CSS3 and nth-child CSS3のrotateファンクションでメニューのチュートリアル […]

  2. […] Create a Cool Messy List with CSS3 and nth-child | Stiern […]

  3. […] Create a Cool Messy List with CSS3 and nth-child […]

  4. […] 28. Create a Cool Messy List with CSS3 and nth-child […]

  5. The Ultimate Roundup of 55+ CSS3 Tutorials « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates

    August 15, 2010 at 8:18 pm

    […] 28. Create a Cool Messy List with CSS3 and nth-child […]

  6. […] 28. Create a Cool Messy List with CSS3 and nth-child […]

  7. […] 28. Create a Cool Messy List with CSS3 and nth-child […]

  8. Wszystko o HTML5 i CSS3 | Blog Staircase.pl

    July 20, 2010 at 12:37 am

    […] Create a Cool Messy List with CSS3 and nth-child While working on a design recently, I stumbled upon Chris Coyier’s article How nth-child Works. Chris shows us the basics of the nth-child pseudo-selector in CSS. It can be used for so many things, but in this short tutorial I’m going to show you how to create a cool messy list. […]

  9. […] 6. Create a Cool Messy List with CSS3 and nth-child […]

  10. Really Useful CSS3 Tutorials and Resources | Galaxark Blog

    May 17, 2010 at 10:00 pm

    […] First, check out the demo to see what we’re creating in the demo. Read More . . […]

  11. Muhteşem HTML5 ve CSS3 Uygulamaları | BilmekGerek

    May 17, 2010 at 9:13 pm

    […] Create a Cool Messy List with CSS3 and nth-child – Demo […]

  12. […] Create a Cool Messy List with CSS3 and nth-child – Demo […]

  13. Muhteşem HTML5 ve CSS3 Uygulamaları | webdunyam.net

    May 17, 2010 at 2:52 pm

    […] Create a Cool Messy List with CSS3 and nth-child – Demo […]

  14. tomzorz.me Projects – CSS3 újdonságok | ToMzorz insider

    April 16, 2010 at 9:44 pm

    […] projects oldalhoz teljesen véletlenül találtam egy jó ötletet:  http://stiern.com/tutorials/create-a-cool-messy-list-with-css3-and-nth-child <- ezen az oldalon. A lényeg, hogy az új nth-child és nth(odd), nth(even) elemeket és az […]

  15. How to find the degree of indeterminacy in structural analysis? – ENGINEERING SOLUTIONS FOR EVERYDAY LIFE

    April 16, 2010 at 3:11 am

    […] Stiern.com » Create a Cool Messy List with CSS3 and nth-child […]

  16. […] This post was mentioned on Twitter by bkmacdaddy designs, WPstudios, Richard Laksana, Eduardo Romero, Sri Ganesh.m and others. Sri Ganesh.m said: RT @bkmacdaddy: Create a Cool Messy List with CSS3 and nth-child – http://bit.ly/bGCddk […]