Sites Web que nous aimons: MD Nichrome

Ce site Web étonnant met en valeur la police MD Nichrome du pilote de masse. Des animations et des graphiques intelligents mettent en évidence ses fonctionnalités.

Ces animations utilisent Styled<video></video> Éléments.

La conception comprend des détails subtils mais efficaces, comme les lettres de décoloration et de fin. Ceci est réalisé avec CSS: white-space: nowrap; , overflow: hidden; et un masque de gradient linéaire créant l'effet de fondu. Cela utilise intelligemment les gradients CSS comme images générées par le navigateur.

 H1 {
  Espace blanc: Nowrap;
  débordement: caché;
  -Webkit-mask-image: linéaire-gradient (à droite, noir 75%, transparent);
}

Le site montre également intelligemment les caractéristiques OpenType de la police (fractions, lettres alternatives). Le plan de volants révèle l'apparence par défaut en utilisant font-feature-setting: unset; .

 .élément {
  Définition des portes: unset;
}

Cependant, l'aspect le plus captivant est l'arrière-plan. Une animation chatoyante, imitant la texture du papier, est superposée d'un dégradé. Ce scintillement est une image PNG; background-position crée l'effet d'animation. Le flou subtil ajoute une texture unique.

Le gradient de fond en douceur est réalisé en utilisant une approche basée sur la courbe de Bézier, comme l'explique le créateur Rutherford Craze. Il a développé un outil pour générer ces gradients, abordant le problème commun de la "zone morte gris" dans les gradients linéaires. Son outil permet un contrôle plus fin sur l'interpolation des couleurs.

Une autre caractéristique notable est la navigation collante. Initialement caché, il apparaît sur Scroll, améliorant la focalisation sur la typographie. Ceci est élégamment mis en œuvre avec le positionnement collant CSS:

 .
  Position: collante;
  En haut: 75px;
}

La conception minimaliste, priorisant la typographie, crée une expérience utilisateur ciblée et épurée - un contraste rafraîchissant avec de nombreux sites Web remplis de distraction.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!