{"id":353219,"date":"2021-10-06T15:24:18","date_gmt":"2021-10-06T22:24:18","guid":{"rendered":"https:\/\/css-tricks.com\/?p=353219"},"modified":"2021-10-06T15:24:21","modified_gmt":"2021-10-06T22:24:21","slug":"websites-we-like-md-nichrome","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/websites-we-like-md-nichrome\/","title":{"rendered":"Websites We Like: MD Nichrome"},"content":{"rendered":"\n

Here\u2019s a beautiful website: it\u2019s a type specimen for Mass-Driver\u2019s ever-so-lovely type family MD Nichrome<\/a>. There\u2019s a ton of nifty animations and graphics explaining all the features inside\u2026<\/p>\n\n\n\n\n\n\n\n

\"\"<\/figure>\n\n\n\n

That little bit of CSS is neat. It makes sure that each <h1><\/code> stays on a single line with white-space<\/a><\/code>, then sets hidden overflow on them so the heading trails off. The fading is courtesy of a linear gradient that incorporates transparency. The gradient is actually a mask-image<\/a><\/code> in this case. That’s a good reminder that CSS gradients are images generated by the browser.<\/p>\n\n\n\n

h1 {\n  white-space: nowrap;\n  overflow: hidden;\n  -webkit-mask-image: linear-gradient(to right, black 75%, transparent);\n}<\/code><\/pre>\n\n\n\n
In the image above you can also see how Mass-Driver is advertising the OpenType features of the font. That\u2019s stuff like fractions or alternate letters that gives your text superpowers. By default, these sections show what the feature is, but when you hover over them they do the following:<\/p>\n\n\n\n
.element {\n  font-feature-setting: unset;\n}<\/code><\/pre>\n\n\n\n
I don\u2019t think I\u2019ve ever used unset<\/code> before but this is a great place to use it\u2014show what the feature looks like up front and then when you hover show what the default is. Smart stuff.<\/p>\n\n\n\n
But the part that caught my eye\u2014besides the kick ass typography\u2014is the background. It\u2019s made up of two parts: a shimmery animation that makes the page look like paper, and the gradient that’s stacked on top of it. And after digging around in DevTools I realized that shimmering effect is a PNG image where the background-position<\/code> property moves the picture around slightly to animate it like a GIF. It\u2019s hard to see in pictures, so here\u2019s a copycat demo I made with the opacity turned off to make it easier to see:<\/p>\n\n\n\n