Community Project: Unordered List Results!
tuts workshop

Community Project: Unordered List Results!

on Jun 6th 2012 with 53 comments

Wow. Wowzers trousers. Nearly 100 of you have responded to the Community Project gauntlet thrown down just a few days ago! It’s great to see how differently the challenge was interpreted too – take a look..

The Challenge

I asked you all to style this simple markup..

<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>

..using whatever magic you could muster with CSS alone. Here are the results!

A Couple of Examples

You’re welcome to continue submitting ideas for this, but there’ll be another challenge coming soon. In the meantime, check out a few of the submissions which most caught my eye:


Secret Doors – by Noel Delgado

Roundabout – by Michael Holcombe

Kittens – by Adam Avramov

Doodle Heart – by Anna Ladoshkina

Flight Information – by Thoriq Firdaus

Console – by Andréas Lundgren

3D Menu – by Irko Palenius

Personal Disclaimer

There’s a chance I somehow missed your submission, messed up your name, copied the wrong url to your own site, ruined something I haven’t even thought about – if that’s the case, just shout at me in the comments and I’ll see about setting things right.

Other than that, enjoy everyone’s work and leave constructive advice, questions and thoughts in the comments below. Thanks to all who participated – here’s to a successful first Webdesigntuts+ Community Project!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hi there! My name's Ian Yates. Welcome to Webdesigntuts+ :)  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Adam Avramov

    Not bad! Folks have done some really interesting and inspiring things here. :)

  • http://www.nexsoftware.net Justin

    Nice. Some really cool ones in there. I don’t do much design so I kept mine pretty simple. Mine is “What’s for Lunch”… the last one in the list.

    • Yang Shaobo

      Nice work! your one is not that fancy but really practical and graceful

  • http://seniorwebdesigner.com Mohamed

    I love the challenge. My Fav one is the “Secret Doors” very well done :)

  • Mike

    Mine is Scan Lined, I don’t spend much time with design elements either so there are a lot on there that I like better than my own but I’d be glad to hear any critique’s about mine.

    Also I noticed that the tabs slide out too far, I believe it’s due to the way it’s being loaded(ajax?) either way just so everyone is aware the tabs left sides are supposed to stay hidden.

    • Mike

      Also seeing the rest of those are great for inspiration. I think this community project idea is awesome and REALLY want to see another one!

    • http://www.snaptin.com Ian Yates
      Author

      Hey Mike, sorry about that – it was down to the way the demo page is styled (nothing complex, I just have the info bar fixed to the left, with suitable padding on the body so that the right-hand side becomes the stage). I’ve fixed it now, so your tabs don’t drift into oblivion :)

  • Ryan McGrane

    Wow, the submissions are very creative! The one by Noel Delgado especially — something like that I never would have thought of.

    I’d love to see more of these community projects by the way.

  • Brad

    Extremely well done all of you!

  • http://www.adesignlink.com Chad Pierce

    Yeah there was some killer ones in there. i like the variety. This is a great measurement tool for my own abilities. I did “Pretty Neat” but there was some out there that were really incredible. Great job all around. Nice mix.

  • http://tinyurl.com/nathanielalbrecht Nathaniel Albrecht

    @Ian Yates

    I know its a few hours late, but I would appreciate if you could still add mine to the gallery, I just sent it in. This was my very first time really working with CSS at all and I learned a ton about how to deal classes and stuff. I also get the whole pseudo-class things now, which I had no clue about when starting. They are powerful little things… I don’t know how ‘semantic’… but cool. I also had never even heard of the content attribute before… definitely not semantic, but still cool to know. The images in the site are hosted by their original owner, and the font is hosted by Google Web Fonts. Thanks for running this contest! I really actually learned the most about CSS then I have in months. Still got a ways to go looking at those other entries though… Haha :D

    Here is a copy of the website hosted on my Dropbox: http://bit.ly/Ld3NT1

    (BTW: I know the background and the banner don’t go well together at all, but I ran out of ideas and wanted at least something cool.)

    • http://www.snaptin.com Ian Yates
      Author

      No problemo – just uploaded it (it’s called “Tool”). Thanks for taking part!

  • Vipin

    @Ian Yates

    My submition is named Hot Pink! and for some reason its not showing the way it should. :(
    Just plain links with purple colors is what i see. Can you please check the code if possible?

    Thanks in advance.

    • http://www.snaptin.com Ian Yates
      Author

      Aah yes – sorry, I should have noticed that. You’d added a class of “list-box” to the ul and pointed to that in the css. No altering the markup!

      Nice job though, thanks :)

      • Vipin

        Totally sorry for that class. Thanks for fixing it. :)

        Looking forward for the next Community project.

  • http://namanyayg.com/ Namanyay Goel

    Wow! Great designs!

    A bit disappointed to see only 77 submissions, even more disappointed when I didn’t make the top# list!

    (I made Chizled, 2MUCHCSS3, and Serious Lee)

    Some of the designs I really liked were –

    Bouncing buttons
    Elegant with a touch of red
    Hearts
    Madlib
    My lobster (I just love those shades of orange and blue)
    Note
    Olive
    Red
    Remote Control
    Silky Smooth (Could someone explain it’s working? Utterly confused)
    Slide Out
    Taste The Rainbow
    Transition (This one too, please explain?)

    Also, noticed using “vmin” as width, on Kittens. Great code.

    Overall, very fun project, the limitation made it even better, hope to see more of these.

    • http://www.snaptin.com Ian Yates
      Author

      No need to be disappointed – I just quickly grabbed a few which caught my eye, it wasn’t a ‘top list’ :)

      And 77 wasn’t at all bad in just a couple of days, especially as this was our first Community Project! Great job on your themes, I hope you’ll dive into the next project too (once I’ve figured out what it should be..)

  • http://fairydust-creations.co.za Kate

    Is it possible to see the code for these example especially adams, I really love the kittens and would reli like to learn!

    • http://www.snaptin.com Ian Yates
      Author

      Absolutely! When you’re viewing a theme you like, hit the download button (maybe I should have made that clearer) to grab a zipped up copy.

      The Kittens example is top notch :)

  • http://about.me/foralien Anna Ladoshkina

    Oh! So many great ideas… I think the project is a success…
    As for me – Secret Doors are absolutely brilliant, nevertheless I’m happy to see my small contribution in the list… Ian, thanks a lot for all this fun

    • http://creatiface.com Thoriq

      Hi Anna.
      Indeed, the Secret Doors is awesome, but your Doodle Heart is stunning. :)
      to Ian thanks for this fun project as well, what’s next? :D

  • http://rickdewolf.wordpress.com Rick de Wolf

    Hi Ian,

    Sorry for the inconvenience, but the project ’3D madness’ should be called ‘Simply clean’. Don’t know what went wrong, but I hope you can change it.

    -Rick

    • http://www.snaptin.com Ian Yates
      Author

      Changed :)

      • http://rickdewolf.wordpress.com Rick de Wolf

        Thanks! :)

  • Anthony

    Some works are awesome and really blowed my mind. also it shows that I need to keep studying new CSS features! :-) thank you! :-)

  • dj

    Ian… you say that you’re going to do something like this again; and I think it’s a good idea. One thing that you should consider before you do however is the format for displaying them. I know there’s a much better way than a drop-down list that requires clicking and also scrolling and mousing, one at a time…. I looked at probably a third of them and I’m sorry to say that the yield was just not worth all the effort I was putting in using the interface.

    • http://www.snaptin.com Ian Yates
      Author

      Sorry to hear that – how would you suggest we navigate through them next time?

      • Vipin

        I agree with “dj” on this point. I suggest using a simple next button instead of the sidebar which would lead to faster browsing through the entries.

        • http://www.snaptin.com Ian Yates
          Author

          I might well introduce that in addition to the select (it’s nice to be able to target specific themes without having to trawl through every entry first.) Thanks for your suggestion!

  • Thomas

    very inspiring… especially using blur and rotation in lists, I’ve never thought of that before.

    @Nick McBurney (Slide Out): looks like we had the same idea ;-) gray and blue FTW

    btw: my list (Hearts) is messed up because of the wrong path to font-awesome. stupid relative paths :) but anyway… my mistake.

    Thanks Ian for this little project.

    • http://www.snaptin.com Ian Yates
      Author

      Aaah yes – got it. You may need to refresh your browser cache, but it’s been updated :)

      • Thomas

        thanks for fixing my mistake ;-)

  • http://eichefam.net Paul

    I had a blast contributing. Mine are “Fancy Stripes” and “Vinyl.”

  • al

    just looked at the submissions on a computer with IE8, wow, what a difference. most of them just do not work. perhaps not unexpected but I guess css functions used on most of them just do not work on IE8,
    probably IE9+ might be better but don’t have that on any computer I own (no Win 7 here yet, still on XP)..

    al

    • http://www.snaptin.com Ian Yates
      Author

      There were definitely plenty of experimental entries – as it’s voluntary I’m not going to make demands about browser compatibility though. Sorry you’re unable to experience some of these examples!

      • al

        that’s OK, I looked at them using Chrome first, then tried IE8.

        Al

  • hassan

    good…man..but can u tell me which font have you used in the introduction picture of your tut …in whihc RESULT is written whihc font it is??

    • http://www.snaptin.com Ian Yates
      Author

      It’s called Markerfield – we use it for all sorts of things across the Tuts+ network (it rocks).

      • hassan

        thanks you soo much..yep it really rocks…

  • Pingback: Community Project: Style an Unordered List | Webdesigntuts+

  • http://www.maxlibin.com max

    thats really good work, ThumbUp !!

  • Diego Alfonso Alvarez

    Hi, my style called Cards had a font-face rule. I would like you to fix it. Thank you.

  • Edwin

    Hey Ian,

    Could you please take a look at my submission called “Braga”? Somehow the icons doesn’t show up. It looks like the img folder is missing.

    I’m looking forward to see more challenges like this.

    Thanks

  • David

    I think they all had great design ideas for the ul’s.
    I don’t have a favorite..i could find uses for all of them…
    If I had to pick…i would choose ….. ALL

    T.G’ness. I’m not one of the judges…

    “Great Job” to All Who entered

  • David

    Will the next contest be announced via email?

  • Jelmar Bosscher

    To bad I was to late submitting mine.

    Great things on here.
    But imagine what we could do if a :click statement would be added.
    Whole static sites could be made.

    • http://www.snaptin.com Ian Yates
      Author

      I’ll still post it if you submit something :)

      • Jelmar Bosscher.

        I see you added it already

  • http://www.tylercollins.co.uk Tyler Collins

    I would love to see the CSS behind these so I could learn from it :)

    • http://www.snaptin.com Ian Yates
      Author

      Hit the download button for each one! Plenty to learn from :)

  • Diego Alfonso Alvarez

    Hi, have you seen my previous comment?: “Hi, my style called Cards had a font-face rule. I would like you to fix it. Thank you.”. I would like to see my style with the correct font. Thanks

  • Pingback: Webdesign Tuts Community Project - Unlinked Media

  • http://aequ.us Michael Holcombe

    WOW! some really great stuff showcased here! I’m proud to be among so many talented designers!

  • http://philhoyt.com Phil Hoyt

    I apparently didn’t see this soon enough but I wanted to have a bit of fun as well so I very quickly threw this together.
    http://philhoyt.com/wp-content/uploads/2012/06/list.html

    Using some basic CSS with a few of the new properties found in CSS3. Looking forward to future activities such as this!

  • Hamid

    thx to all! gr8 job but i really like Kittens – by Adam Avramov work!