

Recreating the Reeder Two-tone Horizontal Rule in Pure CSS - recurser
http://www.daveperrett.com/articles/2014/04/07/recreating-the-reeder-two-tone-horizontal-rule-in-pure-css/

======
j4_james
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.

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

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

~~~
jplur
I get this too. It happens to a lot of @fontfaces when viewed in chrome and
I've never seen a solution on how to fix it, although I've heard it been
called a 'solved' problem. I'd love to figure this out.

~~~
justinweiss
I've seen this problem when using @font-face generators that remove font
hinting to save space. Last time I used FontSquirrel's generator, I had to
specifically unset the option to remove hinting in order to get the fonts to
look right on Chrome on Windows.

~~~
nilliams
Aha thanks for the insight, I'll know what to suggest now when reporting this
to site owners.

------
dz0ny
heh, [http://www.daveperrett.com/articles/2014/04/07/recreating-
th...](http://www.daveperrett.com/articles/2014/04/07/recreating-the-reeder-
two-tone-horizontal-rule-in-pure-css/) massage from the future?

~~~
recurser
hah good catch, now to figure out how to do redirects in S3.

