Grow your CSS skills. Land your dream job.

Sexy CSS3 Fading Line

  • # January 10, 2011 at 4:18 pm

    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.

    # January 10, 2011 at 4:25 pm

    Not bad. But I should say this is not some sort of invention. This technique is everywhere.

    # January 11, 2011 at 8:39 pm

    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/

    gno
    # January 12, 2011 at 2:03 am

    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

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

    gno
    # January 12, 2011 at 2:52 am

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

    gno
    # January 12, 2011 at 2:53 am

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

    # August 13, 2011 at 10:15 am

    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.

    # August 13, 2011 at 12:21 pm

    Someone needs to create a fork that supports Gecko already :P

    # August 13, 2011 at 8:15 pm

    I’ve taken this a step farther, and made this a gradient :hover underline. add a different color for :active and it’s pretty cool.
    Link to JSFiddle

    # August 14, 2011 at 6:32 am

    @BoringCode Here you go: http://jsfiddle.net/joshnh/HdwKA/

    # August 16, 2011 at 1:18 am

    I just forked me some fiddles.

    # August 16, 2011 at 1:21 am

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

    # August 19, 2011 at 10:41 pm

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

    # August 25, 2011 at 3:24 pm

    @joshuanhibbert sexy line!

Viewing 15 posts - 1 through 15 (of 25 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".