5 ms·

Recreating the Reeder Two-tone Horizontal Rule in Pure CSS

11 points by recurser 14y ago

dz0ny 14y ago
heh, http://www.daveperrett.com/articles/2014/04/07/recreating-the-reeder-two-tone-horizontal-rule-in-pure-css/ http://www.daveperrett.com/articles/2014/04/07/recreating-th... massage from the future?
- recurser 14y ago
  hah good catch, now to figure out how to do redirects in S3.
j4_james 14y ago
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 14y ago
Your font is particularly difficult to read. Chrome 26 on Win 7. http://i.imgur.com/kkGtESR.png http://i.imgur.com/kkGtESR.png
- nilliams 14y ago
  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.
- jplur 14y ago
  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 14y ago
    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 14y ago
      Aha thanks for the insight, I'll know what to suggest now when reporting this to site owners.

11 points by recurser 14y ago

dz0ny 14y ago

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

recurser 14y ago
hah good catch, now to figure out how to do redirects in S3.

j4_james 14y ago

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 14y ago

Your font is particularly difficult to read. Chrome 26 on Win 7. http://i.imgur.com/kkGtESR.png http://i.imgur.com/kkGtESR.png

nilliams 14y ago
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.
jplur 14y ago
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 14y ago
  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 14y ago
    Aha thanks for the insight, I'll know what to suggest now when reporting this to site owners.