public
Created

FireFox Friendly Faded Gradient Border CSS

  • Download Gist
divider.css
CSS
1 2 3 4 5 6 7 8 9 10 11
 
.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 */
}
divider.html
HTML
1 2 3
 
<a href="#">link goes here</a>
<span class="divider"></span>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.