Skip to content

Instantly share code, notes, and snippets.

@nrrrdcore

nrrrdcore/divider.css

Created August 29, 2012 05:35
Download ZIP

Revisions

  1. Julie Ann Horvath created this gist Aug 29, 2012.
    14 changes: 14 additions & 0 deletions divider.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@

    .divider {
    float: right; /* float this next to ur linkz */
    display: block;
    height: 47px; /* this */
    width: 1px; /* where the magic happens */
    margin: -7px 6px 0 10px; /* pulls the border to the top of the header */
    background-image: -webkit-linear-gradient(top, rgba(0,93,131,.5) 50%, rgba(0,93,131,.22) 100%); /* good in safari & chrome */
    background-image: -moz-linear-gradient(top, rgba(0,93,131,.5) 50%, rgba(0,93,131,.22) 100%); /* firefox friendly shit */
    box-shadow: 1px 0 0 0 rgba(255,255,255,.1); /* white highlight on the inside of the border, ff now accepts this w/o a prefix */
    }



    3 changes: 3 additions & 0 deletions divider.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@

    <a href="#">link goes here</a>
    <span class="divider"></span>