Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Sexy CSS3 Fading Line

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #31208
    Josh
    Member

    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.

    http://jsfiddle.net/JoshMesser/55ZfK/

    Give me your feedback if you like it.

    #66523
    Chris Coyier
    Keymaster

    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/

    #66419
    gno
    Member

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

    #66413
    jamygolden
    Moderator

    What about using an <hr /> instead of a <div>?

    #66368
    gno
    Member

    It could be done aswell. And that could make as much sense if not more ;-)

    http://jsfiddle.net/pDs4C/

    It just requires an additional line border: 0;

    It has the same result for me, both when showing it in Safari with the gradient, and in firefox with the fallback. :-)

    #66340
    gno
    Member

    You could even remove the classname if you wanted all your hr’s to be sexylines ;-)

    #84947
    skydraios
    Member

    http://jsfiddle.net/GaEzp/
    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.

    #84976
    #85055
    qubestream
    Member

    I just forked me some fiddles.

    #85056

    @qubestream I have heard that forking fiddles is dangerous without the required safety equipment.

    #85290
    qubestream
    Member

    @joshuanhibbert Good stuff. JSFiddle may be the coolest thing eva!

    #85724
    mcguiver178
    Member

    @joshuanhibbert sexy line!

    #95506
    adedoy
    Participant

    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:

    http://jsfiddle.net/4yZNN/

    #133736
    TibTibs
    Member

    I know it’s been a while since anyone has posted here. I needed something a little different then I saw posted here. So I decided to branch off of @cnwtx’s idea for sexy vertical borders between table cells. http://jsfiddle.net/TibTibs/NK2g8/

    #133757
    georgearnall
    Participant

    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!

Viewing 15 posts - 1 through 15 (of 22 total)
  • The forum ‘Other’ is closed to new topics and replies.