Websites We Like: MD Nichrome

This stunning website showcases Mass-Driver's MD Nichrome typeface. Clever animations and graphics highlight its features.

These animations utilize styled <video></video> elements.

The design includes subtle but effective details, like the fading, trailing letters. This is achieved with CSS: white-space: nowrap;, overflow: hidden;, and a linear gradient mask creating the fade effect. This cleverly uses CSS gradients as browser-generated images.

h1 {
  white-space: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, black 75%, transparent);
}

The site also cleverly demonstrates the font's OpenType features (fractions, alternate letters). Hovering reveals the default appearance using font-feature-setting: unset;.

.element {
  font-feature-setting: unset;
}

However, the most captivating aspect is the background. A shimmering animation, mimicking the texture of paper, is overlaid with a gradient. This shimmer is a PNG image; background-position creates the animation effect. The subtle fuzziness adds a unique texture.

The smooth background gradient is achieved using a Bézier curve-based approach, as explained by designer Rutherford Craze. He developed a tool to generate these gradients, addressing the common "gray dead zone" issue in linear gradients. His tool allows for finer control over color interpolation.

Another noteworthy feature is the sticky navigation. Initially hidden, it appears on scroll, enhancing focus on the typography. This is elegantly implemented with CSS sticky positioning:

.sticky-thing {
  position: sticky;
  top: 75px;
}

The minimalist design, prioritizing typography, creates a focused and uncluttered user experience—a refreshing contrast to many distraction-filled websites.

The above is the detailed content of Websites We Like: MD Nichrome. For more information, please follow other related articles on the PHP Chinese website!