Right here’s a wonderful web site: it’s a sort specimen for Mass-Driver’s ever-so-lovely sort household MD Nichrome. There’s a ton of nifty animations and graphics explaining all of the options inside…
If you happen to’re questioning how these animations work, they’re truly styled <video> parts.
There’s a lot of nice graphic design touches as effectively, equivalent to how the letters under path off and fade away…
That little little bit of CSS is neat. It makes positive that every <h1> stays on a single line with white-space, then units hidden overflow on them so the heading trails off. The fading is courtesy of a linear gradient that includes transparency. The gradient is definitely a mask-image on this case. That’s a superb reminder that CSS gradients are pictures generated by the browser.
h1 {
white-space: nowrap;
overflow: hidden;
-webkit-mask-image: linear-gradient(to proper, black 75%, clear);
}
Within the picture above it’s also possible to see how Mass-Driver is promoting the OpenType options of the font. That’s stuff like fractions or alternate letters that provides your textual content superpowers. By default, these sections present what the function is, however whenever you hover over them they do the next:
.component {
font-feature-setting: unset;
}
I don’t assume I’ve ever used unset earlier than however this can be a excellent spot to make use of it—present what the function seems like up entrance after which whenever you hover present what the default is. Sensible stuff.
However the half that caught my eye—moreover the kick ass typography—is the background. It’s made up of two elements: a shimmery animation that makes the web page appear to be paper, and the gradient that’s stacked on prime of it. And after digging round in DevTools I noticed that shimmering impact is a PNG picture the place the background-position property strikes the image round barely to animate it like a GIF. It’s onerous to see in photos, so right here’s a copycat demo I made with the opacity turned off to make it simpler to see:
See that beautiful fuzziness? It offers the background a sort of… texture… that I haven’t seen for a very long time, maybe since round 2008 when everybody was attempting to make buttons appear to be actual, analog buttons on the internet. Geoff lined the identical type of method some time again the place you may get a deep dive into the way it works.
The opposite a part of the design of this web site is the gradient within the background. How are these so clean? Properly, Rutherford Craze, the designer behind this ingenious little bit of net design, made a thread explaining how he bought this impact to work within the browser. He created a gradients software that permits you to create an analogous impact:
Rutherford writes:
Typical CSS gradients plot a straight line by color house, interpolating immediately from the begin to the top color. This software applies the ideas of bézier curves, the idea of digital fonts, to this operation.
By introducing ‘management factors’ alongside the gradient, you may extra finely management the interpolation and produce a smoother finish consequence. The software then samples this ‘bézier gradient’ to supply a linear gradient you may work with in CSS.
What Rutherford is describing above is what’s referred to as the “Grey Lifeless Zone” of gradients, the place typically in a linear gradient there’s this grey colour that kinds within the center.
One other small element that I nearly didn’t catch was the sticky navigation: whenever you first load the web site you simply see the brand with nothing else, however then as you scroll you’ll see the nav and it locks into place:
Discover how sticky positioning can also be used afterward to exhibit the font’s glyphs.
CSS makes this type of factor really easy. Declare sticky positioning on the component, then offset the stickiness if the component ought to begin sticking at a sure spot.
.sticky-thing {
place: sticky;
prime: 75px;
}
Since they need you to concentrate on the letters first and never all the remainder of the UI, it makes a ton of sense to place the navigation off to 1 facet, solely whenever you want it. And this makes the general design really feel extremely centered and easy, barely price commenting on in any respect maybe, however when most web sites are so filled with distractions then I believe it’s price celebrating quiet web sites like these.
The publish Web sites We Like: MD Nichrome appeared first on CSS-Methods. You may help CSS-Methods by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!