Websites, die wir mögen: MD Nichrome

Diese atemberaubende Website zeigt die MD Nichrome-Schrift von Mass-Triver. Clevere Animationen und Grafiken unterstreichen ihre Funktionen.

Diese Animationen verwenden gestylt<video></video> Elemente.

Das Design enthält subtile, aber effektive Details wie die verblassenden und nachfolgenden Buchstaben. Dies wird mit CSS: white-space: nowrap; , overflow: hidden; und eine lineare Gradientenmaske, die den Fade -Effekt erzeugt. Dies verwendet clever CSS-Gradienten als Browser-generierte Bilder.

 H1 {
  weißer Raum: Nowrap;
  Überlauf: versteckt;
  -Webkit-Masken-Image: Linear-Gradient (nach rechts, schwarz 75%, transparent);
}

Die Site demonstriert auch die Openentyp -Funktionen der Schriftart (Brüche, alternative Buchstaben). Schwebewachung zeigt das Standard-Erscheinungsbild mit font-feature-setting: unset; .

 .Element {
  Schriften-Feature-Festsetzung: Unbegründet;
}

Der faszinierendste Aspekt ist jedoch der Hintergrund. Eine schimmernde Animation, die die Textur von Papier nachahmt, wird mit einem Gradienten überlagert. Dieser Schimmer ist ein PNG -Bild; background-position erstellt den Animationseffekt. Die subtile Unschärfe fügt eine einzigartige Textur hinzu.

Der reibungslose Hintergrundgradient wird unter Verwendung eines bézier-basierten Ansatzes erreicht, wie der Designer Rutherford Craze erklärt. Er entwickelte ein Werkzeug, um diese Gradienten zu erzeugen und sich mit der gängigen "grauen Deadzone" -Problem in linearen Gradienten zu befassen. Sein Werkzeug ermöglicht eine feinere Kontrolle über die Farbinterpolation.

Ein weiteres bemerkenswertes Merkmal ist die klebrige Navigation. Zunächst versteckt es, erscheint es auf Scroll, wodurch der Fokus auf die Typografie verbessert wird. Dies wird elegant mit CSS klebriger Positionierung implementiert:

 .sticky-thing {
  Position: klebrig;
  Top: 75px;
}

Das minimalistische Design, das die Typografie priorisieren, schafft eine fokussierte und übersichtliche Benutzererfahrung-ein aktualisierter Kontrast zu vielen ablenkenden Websites.

Das obige ist der detaillierte Inhalt vonWebsites, die wir mögen: MD Nichrome. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!