Community Project: Search Form Results!
tuts workshop

Community Project: Search Form Results!

This project was a little more spicy than the first; around 40 of you responded to the search form styling challenge last week and we’ve had some interesting interpretations – take a look..


The Challenge

I asked you all to style this simple markup..

<form>
    <input type="search" placeholder="What are you looking for?">
    <button>Search</button>
</form>

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


Small Brown Search – by Fabian Pecher

All the way Round – by Amol Mandhane

Natureful Search Form – by Jordan Foreman

Glowing Pulse – by Jack Rugile

SpaceCat – by John Jack

Blur – by Josh Allen

Blue Search – by Ernesto Camacho

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 many more Webdesigntuts+ Community Projects!

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

    Spaaaaaace Caaattt!! *like*

  • http://www.diogosilva.net/ Diogo Silva

    I like “Blue Search” by Ernesto Camacho. Good work.

  • Akshay

    This is really awesome! dunno how I missed :(

    When will we have next community project?

  • http://home.iitb.ac.in/~amol_mandhane/ Amol Mandhane

    The comment link on the results page redirects to unordered list community project.

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

      Sorry – fixed now :)

  • http://laurensdeb.tumblr.com Laurens Debackere

    Mine isn’t centered properly,

    here’s a fix!:

    .webdesigntuts-workshop form{
    text-align: center;
    margin-left: -25%;
    position: relative;
    }

    Could you please change it!!!

    THX,

    Laurens :)

    • http://laurensdeb.tumblr.com Laurens Debackere

      PS: Only use it in the example itself, in the zip it will ruin the layout!!!

      THX

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

        Done – hope that’s better :)

        • http://laurensdeb.tumblr.com Laurens Debackere

          No, it isn’t maybe you did something wrong.
          Because when I look at the source I see the exact same thing it’s still

          .webdesigntuts-workshop form{
          text-align: center
          }

          My aplogies for the trouble,

          Laurens

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

            I think you’ll need to refresh your cache in that case :)

          • http://laurensdeb.tumblr.com Laurens Debackere

            Thanks,

            sorry, my mistake!

            Laurens :)

  • julia

    Natureful Search Form is not accessible.

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

      They all run on the same markup – you mean the contrast perhaps? Legibility? Fair point..

    • http://jordanforeman.com Jordan Foreman

      I’m also not completely sure what you mean, but I can definitely see contrast being an issue. I kinda just whipped it up quickly…focusing more on the animations. I can definitely see the white clouds obscuring the white text in the form being an issue.

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

        I wouldn’t worry too much Jordan – these community projects are exercises in experimentation!

        • http://jordanforeman.com Jordan Foreman

          No worries! :) just diggin the feedback. These community projects are a lot of fun! I’m definitely looking forward to more in the future

  • Jesus Bejarano

    Which is the font in “small brown search”?.

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

      That would be Pacifico, also available from Google fonts. It’s a nice one I always think :)

      • Jesus Bejarano

        Great is already in my collection.

  • http://overthecounterdesign.com Chatman R.

    Mr. Yates, I submitted Scribble Search but made a typo in my site URL (worst possible place, I know). It says “http://overthecounterdeisgn” which, well, doesn’t exist. It’s not a huge deal, but I’d appreciate it if that was fixed.

    Also, SpaceCat is full of win. Love it!

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

      If I had a dollar for every time I’ve typed Webdeisgntuts+ (or Webdesigntits+ come to mention it) I’d be a very wealthy man!

      Updated – thanks for your contribution :)

  • Techeese

    I wasn’t able to submit mine in time… :’(
    can I still submit?

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

      yes :)

  • sicontis

    Love that Space Cat…meeooww!!

    • Ronnie

      I thought mine was pretty good (RED!) but Space Cat is AWSOME! Three thumbs up for that one.

  • http://zamantunelim.com/ Yusuf YILDIZ

    I love Glowing Pulse, Nice Work!

  • http://zamantunelim.com/ Yusuf YILDIZ

    What is the next project? :P

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

      Plenty of ideas floating around – not sure how complicated to make it at this point though… Any suggestions are welcome!

      • http://laurensdeb.tumblr.com Laurens Debackere

        Style an html5 music player maybe,

        that would be really cool!

        Laurens :)

      • Francis Thibault

        Please don’t make them too much involving many of us have jobs, and all! I love the do it in an hour or two concept, while I am sure that some designs took way more than that, at least those projects are doable quickly that’s what I love about them.

      • http://www.johnbowie.co.uk John Bowie

        I think you should keep in quite simple and not be to time consuming.

        How about styling a simple table of items next?

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

          Yep – a data table is on the list of possibles..

          • Francis Thibault

            That would be great, always have to do some at work and never have the time to make them extraordinary good looking.

  • http://www.cirkut.net Josh Allen

    Thanks for featuring my design! I’ve been on a minimalist blurred cliche lately. I can’t wait until the next community project, I can’t believe I haven’t joined in before! Thanks for the opportunity!

    • http://www.cirkut.net Josh Allen

      Also, I just noticed that on mine (Blur) when I added the body width and height 100%, it layers over the search box. In my CSS, can you remove my html,body declaration? Thanks!

  • Adam Avramov

    Pity I couldn’t participate this time! Gotta say, there’s a lot of awesome stuff – my total favourite being Aurora. Eagerly awaiting the next community project – you rock, guys!

  • http://psdesigne.on.ma Zikoon

    Blue Search simple & cool

  • http://yasirwadood@tumblr.com Yasir

    Love … Blur – by Josh Allen

  • http://www.ilcode.com/ iLCODE

    I like this blog a lot thank for hard works

  • http://www.mikewarddesign.co.uk/ Web Design Bicester

    My favorite is blue search.