Recreating the Reeder Two-tone Horizontal Rule in Pure CSS(daveperrett.com)

11 pointsby recurservor 13 Jahren8 comments

Recreating the Reeder Two-tone Horizontal Rule in Pure CSS

http://www.daveperrett.com/articles/2014/04/07/recreating-the-reeder-two-tone-horizontal-rule-in-pure-css/

8 comments

j4_jamesvor 13 Jahren

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.

tghwvor 13 Jahren

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

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

nilliamsvor 13 Jahren

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.

jplurvor 13 Jahren

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.

justinweissvor 13 Jahren

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.

nilliamsvor 13 Jahren

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

dz0nyvor 13 Jahren

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

recurservor 13 Jahren

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