Grow your CSS skills. Land your dream job.

Style a List with One Pixel

Published by Chris Coyier

A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list:

The HTML is nothing fancy, just a nested unordered list like any other:

<ul id="project-list">
    <li><a href="#">Civil Engineering</a>
        <ul>
            <li><a href="#">Cowley Hall Parking Lot Recontruction</a></li>
            <li><a href="#">Culver’s Home Office</a></li>
            <li><a href="#">First Addition to Highland Addition</a></li>
            <li><a href="#">Fox Point Apartments</a>
                <ul>
                    <li><a href="#">East Side</a></li>
                    <li><a href="#">West Side</a></li>
                </ul>
            </li>
            <li><a href="#">Metropolitan Place Phase II</a></li>
            <li><a href="#">Oak Park Place of Baraboo</a></li>
            <li><a href="#">Premier Coop</a></li>
            <li><a href="#">Sleep Inn & Suites</a></li>
            <li><a href="#">Tradewinds Business Center</a></li>
            <li><a href="#">UW-Madison Nielsen Tennis Stadium</a></li>
        </ul>
    </li>
    <li><a href="#">Environmental Engineering</a></li>
    <li><a href="#">Telecommunications Engineering</a>
        <ul>
            <li><a href="#">Nsight TeleServices (CellCom) Wisconsin</a></li>
            <li><a href="#">Oakland County/Radian Communications Michigan</a></li>
            <li><a href="#">T-Mobile Site Deployment</a></li>
            <li><a href="#">U.S. Cellular Network Development</a></li>
            <li><a href="#">Western Wireless South Dakota</a></li>
        </ul>
    </li>
</ul>

In the CSS, we'll apply the single-pixel PNG graphic to the lists themselves, repeated vertically, and the list items themselves, repeated horizontally. On the list items, we can can "stop" the lines from going the whole distance across by giving the anchor links inside them a white background, which lays on top of the list item blotting out the line.

#project-list {
    background:transparent url(../images/graypixel.png) repeat-y 15px 0;
    width:340px;
}

#project-list li {
    font-size:16px;
    margin:15px 0 20px;
    padding:0 0 0 10px;
}

#project-list li a {
    background:white;
    color:#1F6DD9;
    display:block;
    padding:3px;
}

#project-list li a:hover {
    color:#84B8FF;
}

#project-list li ul li {
    background:transparent url(../images/graypixel.png) repeat-x 0 8px;
    font-size:13px;
    margin:4px 0 4px 5px;
    padding:0 0 0 20px;
}

#project-list li ul li a {
    padding:0 0 0 3px;
}

#project-list li ul li ul {
    background:transparent url(../images/graypixel.png) repeat-y 15px 0;
    margin-bottom:10px;
}

#project-list li ul li ul li {
    margin-left:16px;
    padding-left:10px;
}

View Demo

Comments

  1. That looks very nice. A creative use of one pixel!

  2. very clever as always ;)

  3. Permalink to comment#

    Haha, this is win. :P

    Very cool Chris.

  4. Permalink to comment#

    I can already think of ways I could use this, thanks.

  5. Permalink to comment#

    Really really clever.

    It’s always amazing how versatile some web techniques can be with some creativity.

    Thanks for the tip on thinking outside the box.

  6. Permalink to comment#

    very nice tip. thank you :)

  7. Amazing tip, I haven’t thought of that. It’s so simple but nice and effective.

  8. Permalink to comment#

    Nice trick! I might use it some time since I’m a minimalist fanatic :)

  9. Alexander Bennett
    Permalink to comment#

    That is extremely cleaver and cool! So awesome!

  10. Very cool application of css and a pixel :)

  11. Cool trick – nice way to make a sitemap ;)

  12. Permalink to comment#

    Cool trick, very creative thinking outside the box! Kudos.

  13. ConCy
    Permalink to comment#

    Thanks Chris, this is some handy thing.

    Is it possible to connect the line to the left of “ul#project-list li ul li ul li (East & West) side” to the parent ?

    So that the vertical line tot he left of East Side connects to the horizontal line of Fox Points.

    For the rest, this is a great use of a pixel in combo with some handy CSS.

  14. Wow… super cool technique! Me thinks I will use it tomorrow on a project… I know just the page… hmmmm ;)

  15. Very cool! Never would have thought of using a 1 pixel background that way.

  16. It actually took me a moment to realize what was so special about this method.
    After looking at the DEMO, I was like ‘OMG’

    That is F-ing amazing Chris :)
    You never cease to amaze us!

  17. Permalink to comment#

    Sounds neat!

  18. Matt
    Permalink to comment#

    One of the most creative things I’ve seen all day. Probably the best thing I’ve seen all day (nothing happens on Labour Day for me).

  19. Permalink to comment#

    Chris, that’s pretty much a css ninja trick. Well done

  20. Permalink to comment#

    Nice practices~! ;)

  21. Kyle Kinnaman
    Permalink to comment#

    This is awesome. Also, rather than using a unique png, you could add a pixel to the end of a sprite and save an HTTP request…

    • ConCy
      Permalink to comment#

      I’m not sure one can still repeat-x and/or repeat-y that way ;)

      What could be done though is coding the PNG in the CSS directly. So, not having a file at all.

      #example {
      	foo-bar: 12px; 	
      background:url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
      /ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExK
      cppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) 
      top left no-repeat; )
      	}
    • Bill
      Permalink to comment#

      data:image is great, provided you don’t want anyone with IE to see it.

    • Yeah unfortunately one of sprites major limitations is no repeating.

  22. Nice trick, very smart ! Thanks

  23. mikolajewskip
    Permalink to comment#

    Nice trick, but is there possibility to make corners where list ends? it’s opened

  24. Permalink to comment#

    Hehe, very creative. I will probably use this is making category page or HTML sitemap for my blog.

  25. Permalink to comment#

    I found a site map that has something similar – http://www.zabdesign.de/pro/public/sitemap/sitemap-styled.html

    • That’s very slick. You could do about the same thing by altering this just a little to put a border around the anchor elements.

    • Sander
      Permalink to comment#

      Well i have to look into it deeper but i’m not sure thats 100% possible.

      as subTree’s seem to end instead of your example where the 1 line is repeated vertically all the way to the end of the UL. where it immediately connects to the next LI.

  26. Genius! Never thought of this, and its so simple! Thanks alot :)

  27. Permalink to comment#

    This is awesome… I’ve always liked the idea of using mini-graphics more than once… And I can’t say that I’ve seen this technique before. Great job & Thanks!

  28. Anthony
    Permalink to comment#

    Good Job

  29. This is really great… Is this the same technique that those nettuts people use to give this effect to their nested comments? Oh and great to see that you included a related post’s plug-in[or something similar I guess?] at css tricks! :D

    • Oooh yeah sorry that looks a little weird. The redesign will be out soon and that area will make a lot more sense =)

  30. matt
    Permalink to comment#

    very cool

  31. Ryno
    Permalink to comment#

    Nice one Chris! Clever stuff!

  32. Awesome stuff Chris! Thats very smart thinking.

  33. Thank you very much. I’ll try it.

  34. Permalink to comment#

    So simple, it’s brilliant… Like it was just waiting for you to show it to us.

    Makes everyone else look so silly that no one thought about it earlier.

    Thank you for this Chris.

  35. Permalink to comment#

    Good stuff Chris, always wondered how to go about that.

  36. Permalink to comment#

    pretty damn cool. way to think outside the box.

  37. Permalink to comment#

    I really, really like that technique… very smart

  38. Permalink to comment#

    Very clever indeed. Thanks for sharing.

  39. Permalink to comment#

    Nice idea but of course it looks terrible in IE6 (hardly your fault) and there’s a lot of extra weight in that one pixel for Adobe meta-data and the cookie.

  40. Permalink to comment#

    liked it, but it will not support all browser, especially ie6

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".