私たちが好きなウェブサイト：MD Nichrome

この見事なウェブサイトは、Mass-DriverのMD Nichrome書体を紹介しています。巧妙なアニメーションとグラフィックは、その機能を強調しています。

これらのアニメーションはスタイルを利用しています<video></video>要素。

デザインには、フェード、トレーリングレターなど、微妙で効果的な詳細が含まれています。これは、CSSで達成されます： white-space: nowrap; 、 overflow: hidden; 、および線形勾配マスクがフェード効果を作成します。これにより、CSSグラデーションはブラウザーで生成された画像として巧みに使用されます。

 H1 {
  ホワイトスペース：nowrap;
  オーバーフロー：隠し;
  -webkit-mask-image：線形勾配（右、黒い75％、透明）;
}

また、このサイトは、フォントのOpentype機能（分数、代替文字）を巧みに示しています。ホバリングはfont-feature-setting: unset; 。

 。要素 {
  Font-Feature-Setting：脱却;
}

ただし、最も魅惑的な側面は背景です。紙のテクスチャーを模倣したきらめくアニメーションは、グラデーションで覆われています。このきらめきはPNG画像です。 background-positionアニメーション効果を作成します。微妙な曖昧さは、ユニークなテクスチャーを追加します。

スムーズな背景勾配は、デザイナーのRutherford Crazeが説明するように、BézierCurveベースのアプローチを使用して達成されます。彼は、これらの勾配を生成するツールを開発し、線形勾配で一般的な「灰色のデッドゾーン」問題に対処しました。彼のツールは、色補間をより細かく制御できます。

もう1つの注目すべき機能は、粘着性のナビゲーションです。最初は隠されていたが、巻物に表示され、タイポグラフィに焦点を当てている。これは、CSSスティッキーポジショニングでエレガントに実装されています。

 .Sticky-Thing {
  位置：粘着性;
  トップ：75px;
}

タイポグラフィに優先順位を付けるミニマリストのデザインは、多くの気晴らしに満ちたウェブサイトとは爽快で、整理された整理されたユーザーエクスペリエンスを作成します。

以上が私たちが好きなウェブサイト：MD Nichromeの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。