diff options
Diffstat (limited to 'src/old-no-longer-pub/2014-03-19_better-link-underlines-css-background-image.txt')
| -rw-r--r-- | src/old-no-longer-pub/2014-03-19_better-link-underlines-css-background-image.txt | 58 |
1 files changed, 0 insertions, 58 deletions
diff --git a/src/old-no-longer-pub/2014-03-19_better-link-underlines-css-background-image.txt b/src/old-no-longer-pub/2014-03-19_better-link-underlines-css-background-image.txt deleted file mode 100644 index 85a929c..0000000 --- a/src/old-no-longer-pub/2014-03-19_better-link-underlines-css-background-image.txt +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Better Link Underlines with CSS `background-image` -pub_date: 2014-03-19 12:04:25 -slug: /blog/2014/03/better-link-underlines-css-background-image -tags: CSS Tips & Tricks -metadesc: Using CSS background-image to get (nearly) perfect link underlines. -code: True -tutorial: True - ---- - -Medium's Marcin Wichary posted a fascinating look at his [quest](https://medium.com/p/7c03a9274f9) to create better looking link underlines on the site. It's a great read if you're at all obsessive about typography on the web. - ->How hard could it be to draw a horizontal line on a screen? ... This is a story on how a quick evening project to fix the appearance of underlined Medium links turned into a month-long endeavour. - -I highly suggest having a look at [Wichary's post](https://medium.com/p/7c03a9274f9), but Medium doesn't seem big on tutorials -- Wichary never actually posts the code he's using to achieve the underlines. - -I was curious, because Google may be abandoning link underlines, but I still like them, especially when the links are in bodies of text. I was also curious because this site has the same problem Medium's old link styles had in Chrome: ugly, thick underlines. The version of Chrome in the Canary channel fixes this, but the current shipping version still looks bad: - -[](https://longhandpixels.net/media/images/2014/chrome-underlines-bad.png "View Image 1") -: Link underlines in Chrome 33 and below - -Canary channel: - -[](https://longhandpixels.net/media/images/2014/chrome-underlines-better.png "View Image 2") -: Link underlines in Chrome 35+ - -Still, I was curious what Wichary has come up with so I opened the dev tools, poked around a bit and found that these are the key styles: - -~~~.language-css -a { - text-decoration: none; - background-image: linear-gradient(to bottom, white 75%, #333332 75%); - background-size: 2px 2px; - background-position: 0px 24px; - background-repeat: repeat-x; -} -~~~ - -You'll need to adjust the colors to fit with your site's color scheme and bear in mind that the background size and position may need to be adjusted based on your font size and line-height. - -I happen to like the underline slightly heavier than what Medium is using so after playing with this technique a bit, here's what I'm planning to roll out here at some point: - -~~~.language-css - background-image: linear-gradient(to bottom, white 50%, #DE4D00 75%); - background-size: 2px 2px; - background-position: 0 20px; - background-repeat: repeat-x; -~~~ - -Here's what it looks like: - -[](https://longhandpixels.net/media/images/2014/fancy-underlines.png "View Image 3") -: Link underlines using `background-image` - -So far as I can tell there are no accessibility or other downsides to this technique, but if you know better let me know in the comments. It degrades pretty well too since you can just use a good old `text-decoration: underline;` for older browsers. - -Now if only the Medium developers would give the site's URLs this level of attention. |