Recreating the Reeder Two-tone Horizontal Rule in Pure CSS | Hacker News Reader

Recreating the Reeder Two-tone Horizontal Rule in Pure CSS

daveperrett.com

11 pointsrecurser8 comments

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.

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

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

Seconded, this webfont (Lato light?) is not Windows friendly for whatever reason. Regular Lato from Google Web Fonts works fine btw, I've used it a lot.

Edit: In fact all variations or Lato from GWF render fine on Windows so not sure if you've just got a duff version of the font or it's some other CSS property that is messing it up.

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.

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.

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

heh, http://www.daveperrett.com/articles/2014/04/07/recreating-th... massage from the future?

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

Reply on news.ycombinator.com