Recreating the Reeder Two-tone Horizontal Rule in Pure CSS

by recurser on 4/7/2013, 12:18 PM with 8 comments
  • by j4_james on 4/7/2013, 2:28 PM

    Another way to achieve this effect:

      hr {
    background-image:
      linear-gradient(left,rgba(195,195,195,0),rgba(195,195,195,1),rgba(195,195,195,0)),
      linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1),rgba(255,255,255,0));
    background-position:0 0,0 1px;
    background-repeat:no-repeat;
    background-size:100% 1px,100% 3px;
    border:0;
    height:4px;
  }
    Fallback is non-existent for browsers that don't support linear gradients, but it has the advantage of automatically working with any background color.

    Not a criticism of the original solution - just offering an alternative approach to the problem.

  • by tghw on 4/7/2013, 2:51 PM

    Your font is particularly difficult to read. Chrome 26 on Win 7.

    http://i.imgur.com/kkGtESR.png

  • by dz0ny on 4/7/2013, 1:51 PM