The <hr /> Contest

Advertisement

What is <hr />? Basically, it is an old HTML-tag which has been used since the very beginning of the Web. hr stands for the horizontal rule and represents exactly what you would expect — a horizontal line or a horizontal divider. By default, web browsers render hr as a simple horizontal line. In terms of semantics the tag is supposed to clearly separate content blocks. This is often used in design of footers, but also makes sense in other situations — for instance, if you want to separate two blog posts or make the divisions within the content structure sharper.

However, the design of horizontal lines is quite simple and not really appealing by default. HTML offers designers four styling attributes: align, noshade, width and size. This is the reason why designers often use CSS to make hr’s look a little bit more attractive. Alternatively, one can replace hr’s completely with an image using the background-property in CSS.


Some designers consider horizontal rule to be unnecessary — after all, you can simple assign some border styling to the container which contains the block. However, hr’s offer more possibilities as you can do whatever you want with a single, standalone HTML-tag. And here is where our contest comes into play.

Similar to our blog header contest1 we’d like to create a smashing gallery of freely available <hr /> graphics which every designer could use without any restrictions whatsoever. To achieve this we need the help of our creative readers. Which is why we decided to announce the <hr /> contest.

Is there a reward?

Of course. We’ll select 15 most beautiful dividers, present them in a post and ask our readers to rate them in a poll. The winner will get a Wacom Intuos3 9X12 USB Tablet — Metallic Gray. It is worth to participate, since we’ll also mention your name and your URL in the article which will contain the smashing examples of contest entries.

Wacom Tablet

Wacom Tablet

What is required?

In order to participate, your design should

  • be unusual, creative and attractive,
  • be designed for the contest and shouldn’t be in use already
  • be recognizable as a divider or a line and has to serve its function — separate content blocks from each other,
  • be in the format PNG, JPG, GIF (if possible, please provide us with the source file as well — such as PSD, EPS, AI etc.)
  • no Flash or Gif-animations, please.

Apart from that,

  • every file must be titled with your name. Samples: hr-john-doe.gif or hr-jane-doe.jpg
  • each image should have the max. size of 30 Kb/each.

Each participant can send up to 5 different graphics (do not use ZIP, RAR etc.) and you must own the copyright for the designs you submit.

Send your designs via e-mail at sven at smashingmagazine.com with the subject line [Hr Contest Entry]. Please mention your name, your URL and the country you are from. If possible, please also provide us with the brief description of the ideas which have been the driving force behind your designs. Be creative, use unusual techniques, explore your skills, do whatever it takes — we’d like you to get really excited about it.

Deadline?

We’ll consider all designs we’ll receive until the 1st of September 2008. The best entries will be published briefly after the contest has ended.

Examples

To spark your creativity we present some excellent examples of how visually appealing <hr /> graphics may look like. The images are clickable and lead to the sites from which they’ve been taken.

Our examples show that a number of creative approaches are possible. The Web needs a creative library of fresh <hr>-dividers. Vignettes and ornaments may be a nice idea, uneven and handwritten elements are also used sometimes. However, the possibilites offered to designers are rarely used. You can definitely risk some unusual design approaches. What are you capable of?

Screenshot - Divider2

Screenshot - Divider3

Screenshot - Divider4

Screenshot - Divider5

Screenshot - Divider6

Screenshot - Divider7

Screenshot - Divider8

Screenshot - Divider9

Screenshot - Divider10

Screenshot - Divider11

Screenshot - Divider12

13Screenshot - Divider14

Screenshot - Divider15

Screenshot - Divider16

You can also get some inspiration from our previous showcase Footers In Modern Web Design: Creative Examples and Ideas17.

Get creative, folks! And good luck!

Footnotes

  1. 1 http://www.smashingmagazine.com/2008/03/05/blog-headers-for-free-download/
  2. 2 http://www.elitistsnob.com/
  3. 3 http://wordpress-designers.com/sketchd/
  4. 4 http://kinoute.org/log/
  5. 5 http://superfluousbanter.org/
  6. 6 http://whywewhisper.com/
  7. 7 http://greenbrierwv.com/
  8. 8 http://www.dm2interactive.com/
  9. 9 http://www.the-estates.org/
  10. 10 http://www.penandthink.com/
  11. 11 http://digitalpaperweb.com.br/ezine/
  12. 12 http://portfoliosfriend.com/
  13. 13 http://digitalpaperweb.com.br/ezine/
  14. 14 http://www.cornelia.hu/
  15. 15 http://scriptandstyle.com/
  16. 16 http://www.dickenschristmasparty.co.uk/
  17. 17 http://www.smashingmagazine.com/2008/04/08/footers-in-modern-web-design-creative-examples-and-ideas/

↑ Back to top Tweet itShare on Facebook

Co-Founder and former CEO of Smashing Magazine. Sven is now writing Science Fiction Stories and looking for a publisher ...

Advertisement
  1. 1
  2. 52

    wow this is a cool contest.. *thinking of a cool entry*

    0
  3. 103

    Rodrigo Seroiska

    August 23, 2008 3:54 pm

    @mark

    i guess not, only pure images =)

    0
  4. 154

    I’m soooo in!

    0
  5. 205

    Thanks!

    0
  6. 256

    Cool, always good to participate in such competitions, not just for winning’s sake..but to see everyone contributing great ideas. I am in !

    ~ All the best guys & keep it up Smashing Magazine ~

    0
  7. 307

    wonderful competition i am in . ;)

    0
  8. 358

    Ahh, I’m taking the plunge. Let’s do this! :)

    0
  9. 409

    Should it be created for use on a white background, or does that matter?

    0
  10. 460

    what about the size in px? does it matter how wide it is? or do you speciffically need 800px wide or 1024 or anything?

    0
  11. 511

    I’m in! :D

    Good luck to everyone :)

    This is an amazing opportunity for designers to show their styles, everyone must join this to see what we can achieve, the hr divider gallery is going to be awesome!

    0
  12. 562

    What an amazing prize. :D

    0
  13. 613

    Gud luck dudes. Awesome contest

    0
  14. 664

    cool contest, i’ll be there too

    0
  15. 715

    Great contest!
    I’ve never heard any use of the hr-tag, but now I can’t wait to see, what will be designed. Might even participate myself… :)

    0
  16. 766

    i just submitted my entry.. i hope i can make it :D

    0
  17. 817

    To bad, I already have that graphics tablet

    0
  18. 868

    Is this a US-only contest? I’m not wasting my time otherwise…

    0
  19. 919

    count me in, i’ll take the chance

    0
  20. 970

    Recently I stumbled upon the website of Straelen listed as a winner in a german accessibility award. They use the hr-element quite often and – to my surprise – the use it very smart inside the header, allthough it is used in combination with a surrounding DIV since the site is from 2005 and I assume this is because IE can not handle these nice graphics for hr-element for older versions.

    0
  21. 1021

    I’d be a bit worried about the voting procedure. What’s stopping somebody voting multiple times for their own design?

    0
  22. 1072

    Great contest idea! But I have one question: I want to style my hr width a fixed width (for example 550px) because of the background-image. Is there any width you would like me to choose or which you’d advise me to take? Cheers, nicole

    0
  23. 1123

    I made my submissions at a width of either 800 px or 640px which is what i felt would be the most useful sizes. How about everyone else?

    0
  24. 1174

    yeah! i’m in!

    0
  25. 1225

    Nice contest…Another! :)

    My work it’s sent to SM Email… good luck to everyone!

    0
  26. 1276

    Is it a “must” to provide an URL for the graphic? I mean does it have to be seen in a working webpage. I could make a hr graphic…send it (via email with the proper source file to clear the copywright theft theorie)…Is that ok?

    0
  27. 1327

    Vitaly Friedman & Sven Lennartz

    August 25, 2008 7:45 am

    @An (#78): URL is optional. It doesn’t have to be actually used. It’s enough to send the graphics.

    0
  28. 1378

    Vitaly Friedman & Sven Lennartz

    August 25, 2008 7:46 am

    @Rakkoon (#70): no, it’s not USA-only content, and not Europe-only contest. Please participate, the country you come from doesn’t matter to us.

    0
  29. 1429

    Here is mine.
    _

    0
  30. 1480

    Nice contest idea… might be nice if we could also provide a screenshot of how it’s supposed to look?

    Ie: if i make one that is a repeating pattern for an hr.. it’s not necessarily going to be obvious when you guys receive the image file how it’s supposed to be used…

    0
  31. 1531

    awesome! :P

    Didn’t want to get scripty with a ‘~’? LOL

    0
  32. 1582

    Good luck folks, I’m definitely going after that wacom beauty!

    0
  33. 1633

    Excellent contest……guess I am in on this one.

    0
  34. 1684

    i’m in and i’m done. Waiting to see other entries and how they turn out to be.

    Very Interesting and thought provoking contest though.There’s a million ways to do this but only 5 are allowed ;)

    Good luck everyone.

    0
  35. 1735
  36. 1786

    I’m in! Definitely out of the ordinary as far as contests go (first thing that came to mind was early FrontPage theme dividers… ha!) but man would I love that tablet!!

    0
  37. 1837

    hhmm… im gonna post my design.. lets go !!

    0
  38. 1888

    I’m just confused with this:
    “• each image should have the max. size of 30 Kb/each” does this mean the overall size of the jpg/png/gif + psd/ai/eps files or just for the jpg/png/gif only?
    thanks for the immediate reply.

    0
  39. 1939

    Robin… I’m pretty sure the size is for the image itself, not necessarily the source file. Wouldn’t make sense if it was a combination of both files put together, then you could just submit one or the other.

    0
  40. 1990

    haha, dumb question :) thanks nways

    0
  41. 2041

    cool contest !!

    but how to subscribe ??

    0
  42. 2092

    got lots of ideas…hmmm, but only 2 days left to work on them! hope i can make it ;)
    but if I couldn’t, can I send them anyway? not for contest -purposes i mean? to be used other where or something like that?!

    0
  43. 2143

    I’m in, and pray me to become the winner :)

    0
  44. 2194

    You should consider extending the contest by a day or so.

    0
  45. 2245

    I just submitted my entries. I don’t know if I’ll win, but I do hope that one of my entries makes it to the top 15. It’ll boost my confidence. I’m a graphic design newbie. Good luck to everyone who’s participating. I can’t wait to see all the beautiful dividers that are going to come out.

    0
  46. 2296

    Hi!
    Does the 30Kb limit also applies to the source files? Or they can be more?

    0
  47. 2347

    just submitted 4 designes, with the .ai files smashing ;)
    hope im not too late, just finished the designed.wish me luck, wanna make it to the top 15!

    0
  48. 2398

    Posted … let see now

    0
  49. 2449

    any update?

    0
  50. 2500

    hi! i just submited my design! it was until september 1…right?

    0

↑ Back to top