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

Advertising
  1. 1

    I dont know the GMT from smashing! anyone?

    0
  2. 102

    You have their time on your comment, I dont know when you posted it but I think that you have some time left even now.
    Its a shame I just noticed it now, I was wondering the same thing for three days :D

    0
  3. 203

    Oh! Thanks for clever tip =)
    It’s good to known that maybe there’s some time left.
    Working on some more Hrs!

    Good luck everyone.

    0
  4. 304

    Good Luck Folks!

    0
  5. 405

    I just submitted my entries by mail.
    Any news??

    0
  6. 506

    Competitor taking part

    September 2, 2008 4:10 am

    When is winner announcement?

    0
  7. 607

    hmm… maybe the staff still confused to choose 15 nominators…

    0
  8. 708

    Competitor taking part

    September 2, 2008 8:49 am

    Yeah, choice might be difficult ;-)

    0
  9. 809

    Vitaly Friedman & Sven Lennartz

    September 2, 2008 9:33 am

    still confused?
    sven just had a look through 149 submissions. and there are 196 to go. so this will take at least a couple of days. patience please…

    0
  10. 910

    Ohhh im dreaming about seeing on of my designs get ti the top 15 !!!!!!!!!!!!!!!! I’ll Call my next webdesign “Smashing” haha :)

    0
  11. 1011

    Wow! Long way to go =S
    Good luck guys! Choose one of mine, ok? hahaha jk!

    0
  12. 1112

    Dariusz (antraxis)

    September 3, 2008 12:15 pm

    This is the one of the most interesting and minimalism competition I have seen
    I’m in love of the smashing magazine for ideas like that :)

    0
  13. 1213

    Vitaly Friedman & Sven Lennartz

    September 4, 2008 8:27 am

    results will be posted on sep/9th. more than one hundred fantastic graphics…

    0
  14. 1314

    Sep/9 is my birthday!!!! i better win then ;)

    0
  15. 1415

    ..And the winner is……

    0
  16. 1516

    what the time is at smashing….hope my comment lets me know… :D

    0
  17. 1617

    happy Birthday Nisreen ! :)

    0
  18. 1718

    The suspense is killing me! Agh!

    0
  19. 1819

    it’s killing me too!!!
    I can’t stop refreshing! hahaha

    btw, Happy Bday Nisreen! =)

    0
  20. 1920

    @Cyn & Silvia: THANKS :)
    ooooh this is soo sweetie of you guys! i hope you both win then :P
    thanks alot, my birthdays keep getting better and better!

    0
  21. 2021

    I thought that my refresh button is not working:) haha
    Happy birthday Nisreen:)

    0
  22. 2122

    @Liw: thank you’re soo sweet! all of you!
    whats up smashing?! sep/9 is over and the results aint out yet! whats goin on?!

    0
  23. 2223

    omg!!! this is getting so exciting! what time sep. 9 will you let us know Smashing? I’m so curious!!!

    0
  24. 2324

    …..I’m curious too…
    =)

    0
  25. 2425

    oh, okay. so who won?

    5

↑ Back to top