Websites We Like: MD Nichrome

Hier ist eine schöne Website: Es ist ein Typenmuster für die überaus liebe Schriftfamilie von Mass-Driver, MD Nichrome. Es gibt eine Menge schicker Animationen und Grafiken, die alle Funktionen erklären…

Wenn Sie sich fragen, wie diese Animationen funktionieren, handelt es sich tatsächlich um stilisierte <video>-Elemente.

Es gibt auch viele großartige grafische Design-Elemente, zum Beispiel wie die Buchstaben unten nachlaufen und verblassen…

Dieses kleine Stück CSS ist raffiniert. Es stellt sicher, dass jeder <h1> mit white-space in einer einzigen Zeile bleibt, und setzt dann einen versteckten Überlauf darauf, damit die Überschrift ausläuft. Das Ausblenden erfolgt dank eines linearen Verlaufs, der Transparenz enthält. Der Verlauf ist in diesem Fall tatsächlich ein mask-image. Das ist eine gute Erinnerung daran, dass CSS-Verläufe vom Browser generierte Bilder sind.

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

Im obigen Bild sehen Sie auch, wie Mass-Driver die OpenType-Funktionen der Schrift bewirbt. Das sind Dinge wie Brüche oder alternative Buchstaben, die Ihrem Text Superkräfte verleihen. Standardmäßig zeigen diese Abschnitte, was die Funktion ist, aber wenn Sie darüber schweben, tun sie Folgendes

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

Ich glaube nicht, dass ich unset jemals zuvor benutzt habe, aber das ist ein großartiger Ort dafür – zeigen Sie, wie die Funktion vorne aussieht, und dann, wenn Sie darüber schweben, zeigen Sie, was der Standard ist. Kluge Sache.

Aber der Teil, der meine Aufmerksamkeit erregt hat – abgesehen von der umwerfenden Typografie – ist der Hintergrund. Er besteht aus zwei Teilen: einer schimmernden Animation, die die Seite wie Papier aussehen lässt, und dem Verlauf, der darüber liegt. Und nachdem ich mich durch DevTools gewühlt hatte, erkannte ich, dass der schimmernde Effekt ein PNG-Bild ist, bei dem die Eigenschaft background-position das Bild leicht bewegt, um es wie eine GIF zu animieren. Auf Bildern ist es schwer zu erkennen, daher hier ein Nachbau-Demo, das ich mit deaktivierter Deckkraft gemacht habe, um es leichter sichtbar zu machen

Sehen Sie dieses schöne Flimmern? Es verleiht dem Hintergrund eine Art… Textur… die ich schon lange nicht mehr gesehen habe, vielleicht seit etwa 2008, als jeder versuchte, Buttons im Web wie echte, analoge Buttons aussehen zu lassen. Geoff hat sich kürzlich mit einer ähnlichen Technik beschäftigt, wo Sie einen tiefen Einblick bekommen können, wie sie funktioniert.

Der andere Teil des Designs dieser Website ist der Hintergrundverlauf. Wie sind diese so glatt? Nun, Rutherford Craze, der Designer hinter diesem genialen Stück Webdesign, hat einen Thread erstellt, der erklärt, wie er diesen Effekt im Browser erzielt hat. Er hat ein Tool für Verläufe erstellt, mit dem Sie einen ähnlichen Effekt erzielen können

Rutherford schreibt

Konventionelle CSS-Verläufe verlaufen geradlinig durch den Farbraum und interpolieren direkt von der Start- zur Endfarbe. Dieses Werkzeug wendet die Prinzipien von Bézier-Kurven, der Grundlage digitaler Schriften, auf diese Operation an.

Durch die Einführung von „Kontrollpunkten“ entlang des Verlaufs können Sie die Interpolation feiner steuern und ein glatteres Endergebnis erzielen. Das Werkzeug sampelt dann diesen „Bézier-Verlauf“, um einen linearen Verlauf zu erzeugen, mit dem Sie in CSS arbeiten können.

Was Rutherford oben beschreibt, ist die sogenannte „Gray Dead Zone“ von Verläufen, bei der in einem linearen Verlauf oft diese graue Farbe in der Mitte entsteht.

Ein weiteres kleines Detail, das ich fast übersehen hätte, war die sticky Navigation: Wenn Sie die Website zum ersten Mal aufrufen, sehen Sie nur das Logo und sonst nichts, aber dann, wenn Sie scrollen, sehen Sie die Navigation, und sie rastet ein

Beachten Sie, wie die Sticky-Positionierung später auch verwendet wird, um die Glyphen der Schrift zu demonstrieren.

CSS macht so etwas so einfach. Deklarieren Sie die Sticky-Positionierung für das Element und verschieben Sie die Stickiness, wenn das Element an einer bestimmten Stelle beginnen soll.

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

Da sie möchten, dass Sie sich zuerst auf die Buchstaben und nicht auf den Rest der Benutzeroberfläche konzentrieren, ist es sehr sinnvoll, die Navigation an die Seite zu legen, nur wenn Sie sie brauchen. Und das lässt das Gesamtdesign unglaublich fokussiert und geradlinig wirken, vielleicht kaum der Rede wert, aber wenn die meisten Websites so voller Ablenkungen sind, denke ich, es lohnt sich, ruhige Websites wie diese zu feiern.