- This topic is empty.
January 10, 2011 at 4:18 pm #31208JoshMember
I was developing a back end tool for a client yesterday. To create some space I added a <hr> tag. Then quickly realized how ugly it was. So I wrote up a sexy CSS3 <hr> replacement line.
Give me your feedback if you like it.January 11, 2011 at 8:39 pm #66523Chris CoyierKeymaster
I think it’s pretty rad, thanks for sharing.
This is how I would do it, I think it’s a bit cleaner: http://jsfiddle.net/ZTz7Q/January 12, 2011 at 2:03 am #66419
Not bad at all.
This is a good example of how CSS3 should be used. To provide additional effects to users with modern browsers, without relying on graphics, and have solid fallback (in this case just a black 1px line, for users in non-css3 supporting browsers.
Chris’ solution is even cleaner and more semantic – but nicely done Josh :-)January 12, 2011 at 2:33 am #66413jamygoldenModerator
What about using an <hr /> instead of a <div>?January 12, 2011 at 2:52 am #66368
It could be done aswell. And that could make as much sense if not more ;-)
It just requires an additional line
It has the same result for me, both when showing it in Safari with the gradient, and in firefox with the fallback. :-)January 12, 2011 at 2:53 am #66340
You could even remove the classname if you wanted all your hr’s to be sexylines ;-)August 13, 2011 at 10:15 am #84947skydraiosMember
I don’t like white-to-black gradient, so I used other colors so there’s not so much contrast between the two colors and also between the line and the content.August 14, 2011 at 6:32 am #84976August 16, 2011 at 1:18 am #85055qubestreamMember
I just forked me some fiddles.August 16, 2011 at 1:21 am #85056joshuanhibbertMember
@qubestream I have heard that forking fiddles is dangerous without the required safety equipment.August 19, 2011 at 10:41 pm #85290August 25, 2011 at 3:24 pm #85724January 26, 2012 at 8:18 pm #95506adedoyParticipant
I tried all of them but seems they appear different in other browsers ahem*ie*
I also tried to add some shadow into it and manipulate the transparency.
here is my version:May 1, 2013 at 11:12 am #133736TibTibsMemberMay 1, 2013 at 2:59 pm #133757georgearnallParticipant
I decided to add something new to this.. [Here is the Pen.](http://cdpn.io/yJjHc “CodePen”)
It animates a ‘glinting’ effect when you hover near the line.
I made it hover when near a surround area (div) since it is quite difficult to get your cursor on that line. Especially if your not trying!
- The forum ‘Other’ is closed to new topics and replies.