Grow your CSS skills. Land your dream job.

Sexy CSS3 Fading Line

  • # January 26, 2012 at 8:18 pm

    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/

    # May 1, 2013 at 11:12 am

    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/

    # May 1, 2013 at 2:59 pm

    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!

    # July 12, 2013 at 4:49 am

    Thanks for the share… here is my two cents…

    display:block;
    border:none;
    color:white;
    height:0.2px;
    background:black;
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#D3D3D3), to(transparent));

    # July 12, 2013 at 8:09 am

    cool way to design a separator…

    # July 12, 2013 at 10:24 am

    Does any one know how to use Chris’s code to create a vertical seperator?

    # July 12, 2013 at 10:29 am

    Nope…there is no such element as a `` as opposed to an `


    `

    In most cases, we can just use the left/right border for a vertical separator.

    # July 12, 2013 at 10:44 am

    @ironfist1986 Like this? :: http://jsfiddle.net/tcgmq/

    # July 12, 2013 at 10:45 am

    Or this…

    http://www.veniaminilmer.com/html/vertical-rule

    # July 12, 2013 at 11:23 am

    I’ve always enjoyed using the indent effect.

    http://jsfiddle.net/ZTz7Q/1470/

Viewing 10 posts - 16 through 25 (of 25 total)

You must be logged in to reply to this topic.

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