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/

by recurser • 13 years ago

11 8 13 years ago

daveperrett.com

dz0ny• 13 years ago

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

recurser• 13 years ago

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

j4_james• 13 years 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• 13 years ago

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

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

nilliams2• 13 years 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• 13 years 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• 13 years 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.

Recreating the Reeder Two-tone Horizontal Rule in Pure CSS

Related Stories