CSS-Styled Lists: Demo

July 10th, 2008

After seeing the amazing response to our previous post CSS-Styled Lists: 20+ Demos, Tutorials and Best Practices, we wanted to share with you a simple demo we created that showcase some of the most used design blocks created that are differently styled and enhanced give us a nice and clean design blocks using CSS-Styled Lists.

Ordered Lists

View Demo | Download Files

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.


16 comments for „CSS-Styled Lists: Demo
  1. fikirbozan on July 10th, 2008 at 7:57 am

    Ov very good. It is clean and fantastic! Good job

  2. Jacob Gube on July 10th, 2008 at 9:15 am

    Awesome demo!

  3. BlackHat Fish on July 10th, 2008 at 10:40 am

    It looks weird in FF and i checked it with ‘s htcp tools to find the error online real quick but i couldnt, guess its some styling bug?

    meh great example none the less. thanks for sharing the download

  4. Noupe on July 10th, 2008 at 11:23 am

    Thanks everyone, this is just a simple example i wanted to show how we can use these design blocks to display web content in a nice and clean way.

    @BlackHat Fish, i am using FF and it looks fine to me. What is the problem you are seeing in FF

  5. Steve on July 10th, 2008 at 6:41 pm

    I remember back in the day when Javascript was the preferred method for image rollovers. Thank goodness those days are over. I use as much CSS as possible in my layouts, many of these are definitely in my bag of tricks.

  6. Htoo Tay Zar on July 11th, 2008 at 2:38 am

    Great work, Realli thanks, I’ll use this techinque in my future project. Please More CSS tricks & tips.

  7. Craig Farrall on July 12th, 2008 at 2:49 am

    Great post, there is plenty in there that I could well use on another project.

  8. Bad Dream on July 12th, 2008 at 5:11 am

    Yep! so cool
    thank you

  9. liam on July 13th, 2008 at 3:11 am

    Sweet stuff,& nice icons :)

  10. Noupe on July 13th, 2008 at 3:22 am

    Yea @Liam, these icons are the Function Icon Set, i thought i mentioned that but i guess i forgot ;)

  11. Serkan on July 13th, 2008 at 4:26 am

    Great work,Please More CSS tricks & tips.
    Thanx Greeting from TURKEY..

  12. Tl7 on July 14th, 2008 at 4:56 am

    nice work there .

  13. Kudos on July 14th, 2008 at 8:48 am

    Anything that removes the need for .js gets my vote. Theres an undeniable purity about css problem solving.

  14. Max on July 21st, 2008 at 10:03 am

    Has learnt which the new

  15. Tetsuo on July 22nd, 2008 at 2:47 am

    Nice collection of examples here. I have to say that the CSS is a little messy though, and in a few in instances the HTML used is invalid.

    Still, there’s enough to go at here to tweak the code to make it 100%. Thanks!

  16. bangbouh on July 26th, 2008 at 1:37 pm

    nice collection!