Popular Tags

Smashing Magazine - we smash you with the information that will make your life easier. really.

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

Prize in The <hr /> Contest

Wacomtabletwithhand in The <hr /> Contest

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?

Elit in The <hr /> Contest

Divider in The <hr /> Contest

Fleron-byline in The <hr /> Contest

Rubinribbon in The <hr /> Contest

Scroll in The <hr /> Contest

Bg Line Ornament in The <hr /> Contest

Sep in The <hr /> Contest

Tree in The <hr /> Contest

Masthead in The <hr /> Contest

Main Hr in The <hr /> Contest

Portfolio in The <hr /> Contest

Space2 in The <hr /> Contest

Script in The <hr /> Contest

Christ in The <hr /> Contest

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

Get creative, folks! And good luck!

The Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Author of several books. Runs the business.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (No votes yet)
Loading ... Loading ...

Tags: ,

Advertising
  1. 1
    amfis
    August 22nd, 2008 4:43 am

    Good luck to everyone!

  2. 2
    Eli
    August 22nd, 2008 4:51 am

    I’ll definitely consider entering :)

  3. 3
    Leannekera
    August 22nd, 2008 4:52 am

    oh yes count me in! :D

  4. 4
    Daniel
    August 22nd, 2008 4:57 am

    Definetly doing this!

  5. 5
    Michal
    August 22nd, 2008 5:04 am

    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

  6. 6
    David Airey
    August 22nd, 2008 5:13 am

    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.

  7. 7
    Ryan
    August 22nd, 2008 5:13 am

    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.

  8. 8
    Cosmi
    August 22nd, 2008 5:15 am

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

  9. 9
    Daniel Whyte
    August 22nd, 2008 5:18 am

    nice ill have to do this :D

  10. 10
    r007
    August 22nd, 2008 5:22 am

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

  11. 11
    Martius
    August 22nd, 2008 5:32 am

    Great contest! I’m in :)

  12. 12
    Vitaly Friedman & Sven Lennartz
    August 22nd, 2008 5:35 am

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

  13. 13
    Joe Casabona
    August 22nd, 2008 5:35 am

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

  14. 14
    SataFLASH
    August 22nd, 2008 6:01 am

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

    i think i’m going in!

    Good luck everyone

  15. 15
    Eliezer
    August 22nd, 2008 6:11 am

    Wow, sounds a great idea, good luck to everyone

  16. 16
    Jason
    August 22nd, 2008 6:18 am

    Definitely going to enter this one.

    http://www.vagrantradio.com

  17. 17
    Niki Brown
    August 22nd, 2008 6:25 am

    interesting concept! will definitely take a stab at it!

  18. 18
    Lee Rickler
    August 22nd, 2008 6:46 am

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

  19. 19
    Jeff
    August 22nd, 2008 6:47 am

    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.

  20. 20
    Christian
    August 22nd, 2008 6:51 am

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

  21. 21
    rvaneo
    August 22nd, 2008 7:33 am

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

  22. 22
    Chris
    August 22nd, 2008 7:50 am

    Im confused…can we only use the tag?

  23. 23
    lucero
    August 22nd, 2008 7:50 am

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

  24. 24
    KunalDeziner
    August 22nd, 2008 8:03 am

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

  25. 25
    Valeria
    August 22nd, 2008 8:05 am

    Nice contest. I’m in

  26. 26
    Rob
    August 22nd, 2008 8:19 am

    nice idea :)

  27. 27
    Jenn
    August 22nd, 2008 8:21 am

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

  28. 28
    Brian
    August 22nd, 2008 8:22 am

    cool, this will be fun!

  29. 29
    Daan
    August 22nd, 2008 8:47 am

    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?

  30. 30
    Dana Woodman
    August 22nd, 2008 9:13 am

    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

  31. 31
    Jason
    August 22nd, 2008 9:46 am

    I’m in !

  32. 32
    Chris
    August 22nd, 2008 10:01 am

    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.

  33. 33
    Mr. Dude
    August 22nd, 2008 10:16 am

    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.

  34. 34
    neillium
    August 22nd, 2008 10:49 am

    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.

  35. 35
    Abhijit Kumar
    August 22nd, 2008 11:06 am

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

  36. 36
    Sofia
    August 22nd, 2008 11:26 am

    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?

  37. 37
    Alex Ch
    August 22nd, 2008 12:50 pm

    count me in :)

  38. 38
    creativelotus
    August 22nd, 2008 12:53 pm

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

  39. 39
    Vitaly Friedman & Sven Lennartz
    August 22nd, 2008 1:07 pm

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

  40. 40
    Kalgar
    August 22nd, 2008 1:10 pm

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

  41. 41
    Paul Walker
    August 22nd, 2008 2:10 pm

    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.

  42. 42
    HBartlett
    August 22nd, 2008 2:35 pm

    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.

  43. 43
    Mario
    August 22nd, 2008 2:39 pm

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

  44. 44
    Rodrigo R. Mammano
    August 22nd, 2008 2:46 pm

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

  45. 45
    Daisy
    August 22nd, 2008 10:27 pm

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

  46. 46
    Violeta
    August 22nd, 2008 10:40 pm

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

  47. 47
    Mark
    August 23rd, 2008 2:03 am

    Is it allowed Javascript?

  48. 48
    Jens
    August 23rd, 2008 5:32 am

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

  49. 49
    mukesh
    August 23rd, 2008 7:41 am

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

  50. 50
    Omar Al-Dolaimy
    August 23rd, 2008 9:41 am

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

  51. 51
    Gavin Steele
    August 23rd, 2008 9:44 am

    I’m in.
    Learn it. Pass it on.

  52. 52
    Jehzeel Laurente
    August 23rd, 2008 10:14 am

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

  53. 53
    Rodrigo Seroiska
    August 23rd, 2008 3:54 pm

    @mark

    i guess not, only pure images =)

  54. 54
    Silvia
    August 23rd, 2008 5:45 pm

    I’m soooo in!

  55. 55
    Khoa Nguyen
    August 24th, 2008 2:21 am

    Thanks!

  56. 56
    Puneet Sakhuja
    August 24th, 2008 4:29 am

    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 ~

  57. 57
    anjum
    August 24th, 2008 6:35 am

    wonderful competition i am in . ;)

  58. 58
    Steven
    August 24th, 2008 8:32 am

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

  59. 59
    Steven
    August 24th, 2008 8:41 am

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

  60. 60
    BogDinamita
    August 24th, 2008 12:03 pm

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

  61. 61
    Daniel Vazquez
    August 24th, 2008 1:00 pm

    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!

  62. 62
    Vasili
    August 24th, 2008 1:46 pm

    What an amazing prize. :D

  63. 63
    praveen Vijayan
    August 24th, 2008 8:58 pm

    Gud luck dudes. Awesome contest

  64. 64
    restu
    August 24th, 2008 9:52 pm

    cool contest, i’ll be there too

  65. 65
    Sandie Sørensen
    August 24th, 2008 10:13 pm

    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… :)

  66. 66
    Jehzeel Laurente
    August 24th, 2008 11:47 pm

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

  67. 67
    Chris
    August 25th, 2008 12:30 am

    To bad, I already have that graphics tablet

  68. 68
    Rakkoon
    August 25th, 2008 2:30 am

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

  69. 69
    NeoSheet
    August 25th, 2008 2:33 am

    count me in, i’ll take the chance

  70. 70
    Nils
    August 25th, 2008 2:34 am

    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.

  71. 71
    Mr. Dude
    August 25th, 2008 2:34 am

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

  72. 72
    Nicole
    August 25th, 2008 2:39 am

    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

  73. 73
    klk
    August 25th, 2008 5:02 am

    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?

  74. 74
    itobacci
    August 25th, 2008 5:07 am

    yeah! i’m in!

  75. 75
    Mario Santos
    August 25th, 2008 5:57 am

    Nice contest…Another! :)

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

  76. 76
    An
    August 25th, 2008 7:25 am

    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?

  77. 77
    Vitaly Friedman & Sven Lennartz
    August 25th, 2008 7:45 am

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

  78. 78
    Vitaly Friedman & Sven Lennartz
    August 25th, 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.

  79. 79
    Jimbob
    August 25th, 2008 10:52 am

    Here is mine.
    _

  80. 80
    Alex Holt
    August 25th, 2008 11:30 am

    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…

  81. 81
    Chris
    August 25th, 2008 4:24 pm

    awesome! :P

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

  82. 82
    alectro
    August 26th, 2008 1:03 am

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

  83. 83
    kern
    August 26th, 2008 5:29 am

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

  84. 84
    jeevs
    August 26th, 2008 8:52 am

    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.

  85. 85
    1
    August 26th, 2008 12:04 pm

    facil!!

  86. 86
    Vernon
    August 26th, 2008 4:26 pm

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

  87. 87
    rifai
    August 27th, 2008 4:22 am

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

  88. 88
    robin
    August 27th, 2008 3:06 pm

    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.

  89. 89
    Vernon
    August 27th, 2008 4:17 pm

    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.

  90. 90
    robin
    August 27th, 2008 5:29 pm

    haha, dumb question :) thanks nways

  91. 91
    Hussein Makki
    August 29th, 2008 5:31 am

    cool contest !!

    but how to subscribe ??

  92. 92
    nisreen
    August 30th, 2008 12:30 am

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

  93. 93
    fathonix
    August 30th, 2008 6:13 am

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

  94. 94
    Bill
    August 30th, 2008 5:31 pm

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

  95. 95
    Manasa
    August 31st, 2008 1:33 am

    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.

  96. 96
    Liw
    August 31st, 2008 6:10 am

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

  97. 97
    Nisreen
    August 31st, 2008 2:05 pm

    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!

  98. 98
    Gaurav
    August 31st, 2008 11:21 pm

    Posted … let see now

  99. 99
    qwerty
    September 1st, 2008 5:01 am

    any update?

  100. 100
    susanapassinhas
    September 1st, 2008 6:50 am

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

  101. 101
    Harrison
    September 1st, 2008 6:57 am

    I dont know the GMT from smashing! anyone?

  102. 102
    Paradajz
    September 1st, 2008 4:19 pm

    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

  103. 103
    Leo
    September 1st, 2008 5:51 pm

    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.

  104. 104
    Marta Feio
    September 1st, 2008 6:53 pm

    Good Luck Folks!

  105. 105
    diecimarzo
    September 2nd, 2008 12:05 am

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

  106. 106
    Competitor taking part
    September 2nd, 2008 4:10 am

    When is winner announcement?

  107. 107
    rifai
    September 2nd, 2008 6:50 am

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

  108. 108
    Competitor taking part
    September 2nd, 2008 8:49 am

    Yeah, choice might be difficult ;-)

  109. 109
    Vitaly Friedman & Sven Lennartz
    September 2nd, 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…

  110. 110
    Nisreen
    September 2nd, 2008 11:14 am

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

  111. 111
    Silvia
    September 3rd, 2008 9:26 am

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

  112. 112
    Dariusz (antraxis)
    September 3rd, 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 :)

  113. 113
    Vitaly Friedman & Sven Lennartz
    September 4th, 2008 8:27 am

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

  114. 114
    Nisreen
    September 6th, 2008 3:07 am

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

  115. 115
    diecimarzo
    September 7th, 2008 11:44 pm

    ..And the winner is……

  116. 116
    just wondering
    September 8th, 2008 11:57 pm

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

  117. 117
    Cyn
    September 9th, 2008 6:39 am

    happy Birthday Nisreen ! :)

  118. 118
    Justin Floyd
    September 9th, 2008 9:32 am

    The suspense is killing me! Agh!

  119. 119
    Silvia
    September 9th, 2008 9:37 am

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

    btw, Happy Bday Nisreen! =)

  120. 120
    Nisreen
    September 9th, 2008 10:27 am

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

  121. 121
    Liw
    September 9th, 2008 12:26 pm

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

  122. 122
    Nisreen
    September 9th, 2008 12:41 pm

    @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?!

  123. 123
    Silvia
    September 9th, 2008 12:49 pm

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

  124. 124
    diecimarzo
    September 9th, 2008 11:25 pm

    …..I’m curious too…
    =)

  1. 00

    There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



Advertisement Advertise with us!
Join in Smashing Forum
Post your job
Advertisement