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

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

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

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 Link

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 Link

  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

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

Advertisement
  1. 1

    Good luck to everyone!

    0
  2. 2

    I’ll definitely consider entering :)

    0
  3. 3

    oh yes count me in! :D

    0
  4. 4

    Definetly doing this!

    0
  5. 5

    is this hr contest or a divider contest, every example uses divs or images i have checked the first three and not one uses the physical tag

    0
  6. 6

    I’ve alwasys liked the divider on ilovetypography.com (identical to that of kinoute.org/log).

    Good luck to all who enter. I’ve yet to sample using a tablet, but have heard nice reviews.

    0
  7. 7

    This is rather unusual, HR’s are notoriously difficult to style for cross browser and to achieve some of the example styles you have to wrap the hr in a div generally.

    Will be interesting to see how this turns out.

    0
  8. 8

    Nice contest. I’m in. Succes to everyone!

    0
  9. 9

    nice ill have to do this :D

    0
  10. 10

    yeah, i’m in. tablet is all i need :)

    0
  11. 11

    Great contest! I’m in :)

    0
  12. 12

    Vitaly Friedman & Sven Lennartz

    August 22, 2008 5:35 am

    @all: it’s a contest for dividers which can afterwards be used to style hr’s.

    0
  13. 13

    Are we restricted to only using the <hr/> tag and styling that?

    0
  14. 14

    Hmmm… intresting… & the prize it’s worth a try!

    i think i’m going in!

    Good luck everyone

    0
  15. 15

    Wow, sounds a great idea, good luck to everyone

    0
  16. 16

    Definitely going to enter this one.

    http://www.vagrantradio.com

    0
  17. 17

    interesting concept! will definitely take a stab at it!

    0
  18. 18

    Entered (sneek peek at http://pointandstare.com !)

    0
  19. 19

    this is great… I had a professor in college who said that the “hr” was all but dead, now I use it all the time… shows what they teach you in college.

    0
  20. 20

    Awesome idea for a contest! Might be competing myself this time!

    0
  21. 21

    I’ll make sure to join this time … thanks smash!

    0
  22. 22

    Im confused…can we only use the tag?

    0
  23. 23

    My.. my… This is interesting… Good luck everyone!

    0
  24. 24

    Best of luck!!! who will participate in this contest :)

    0
  25. 25

    Nice contest. I’m in

    0
  26. 26

    nice idea :)

    0
  27. 27

    how fun! and a prize i am greatly interested in. will definitely enter. :)

    0
  28. 28

    cool, this will be fun!

    0
  29. 29

    I kindof don’t get what’s supposed to happen.

    “be only CSS+HTML-based, no Flash or Gif-animations, please,”
    “be in the format PNG, JPG, GIF (if possible, please provide us with the source file as well — such as PSD, EPS, AI etc.)”

    that confuses me, could you guys make it more clear please?

    0
  30. 30

    Yes, I agree with Daan.

    You ask for a CSS+HTML based Hr, but then say to submit it as a graphic only. You also say don’t submit as a ZIP, so how can we send the image and the CSS/HTML? Could you please clarify?

    Thanks,
    Dana

    0
  31. 31

    I’m in !

    0
  32. 32

    Question: Do we just provide the picture(s), or do we also need to provide an example of it in use on a webpage?

    Thank you.

    0
  33. 33

    I understood the rules as being to create and image in the above formats that can be used with HTML/CSS. Animated gif or Flash formats are not allowed.

    0
  34. 34

    I agree with Mr. Dude. I believe that we are simply to create an image that can be implemented into someone’s website using HTML/CSS. If someone creates one that deals with Flash, there is a possibility that they will not be able to use it.

    0
  35. 35

    I m sorry to say but none of the examples use tag…..
    So what say??

    0
  36. 36

    What does it mean: “you must own the copyright for the designs you submit”.
    Are they just trying to emphasize that the design is not someone elses?

    0
  37. 37

    count me in :)

    0
  38. 38

    im going to try and see what I can come up with

    0
  39. 39

    Vitaly Friedman & Sven Lennartz

    August 22, 2008 1:07 pm

    @all: we expect pure graphics (no animated Gifs or Flash) which can be used with CSS and HTML afterwards.

    0
  40. 40

    I ever worked few hours with photoshop :)
    Good luck !

    0
  41. 41

    It’s not exciting enough to win the contest, but I almost always style HRs to appear as three big, spaced apart asterisks — like most novels seem to have to separate sub-chapters.

    But I’m going to try something new for this.

    0
  42. 42

    This should be interesting – unlike the blog header contest, we’re talking about a line, not a whole header background. Can’t wait to see the results, I’ll bet it’s tougher than it sounds to come up with something.

    0
  43. 43

    At a glance http://whywewhisper.com/ seems not to use any at all, does it?

    0
  44. 44

    Rodrigo R. Mammano

    August 22, 2008 2:46 pm

    I’m (really) in! Gonna be a nice and sweet contest.

    0
  45. 45

    @Mario – whywewhisper.com uses this graphic: http://www.whywewhisper.com/images/site_design/scroll.gif

    0
  46. 46

    Cool!!! I’m definitely in! (:

    0
  47. 47

    Is it allowed Javascript?

    0
  48. 48

    I will give it a try. Count me in. :)

    0
  49. 49

    i will try to participate………….isn’t it nice if i won

    0
  50. 50

    I’ll take the chance :).
    Thank you smashing

    0

↑ Back to top