Laman web yang kami suka: MD Nichrome

Laman web yang menakjubkan ini mempamerkan typeface MD Nichrome Mass-Pemandu. Animasi dan grafik pintar menyerlahkan ciri -cirinya.

Animasi ini menggunakan gaya<video></video> unsur -unsur.

Reka bentuk ini termasuk butiran halus tetapi berkesan, seperti huruf pudar, trailing. Ini dicapai dengan CSS: white-space: nowrap; , overflow: hidden; , dan topeng kecerunan linear yang menghasilkan kesan pudar. Ini bijak menggunakan kecerunan CSS sebagai imej yang dihasilkan oleh pelayar.

 H1 {
  ruang putih: nowrap;
  Limpahan: Tersembunyi;
  -Webkit-Mask-Image: Linear-Gradient (ke kanan, hitam 75%, telus);
}

Laman ini juga bijak menunjukkan ciri OpenType Font (pecahan, huruf alternatif). Hovering mendedahkan penampilan lalai menggunakan font-feature-setting: unset; .

 .element {
  Penetapan Font-Feature: Unset;
}

Walau bagaimanapun, aspek yang paling menawan adalah latar belakang. Animasi berkilauan, meniru tekstur kertas, dilapisi dengan kecerunan. Kilauan ini adalah imej PNG; background-position Menetapkan Kesan Animasi. Fuzziness halus menambah tekstur yang unik.

Kecerunan latar belakang yang lancar dicapai menggunakan pendekatan berasaskan lengkung Bézier, seperti yang dijelaskan oleh pereka Rutherford Craze. Beliau membangunkan alat untuk menjana kecerunan ini, menangani isu "zon mati kelabu" biasa dalam kecerunan linear. Alatnya membolehkan kawalan yang lebih baik ke atas interpolasi warna.

Satu lagi ciri penting ialah navigasi melekit. Pada mulanya tersembunyi, ia kelihatan pada tatal, meningkatkan tumpuan pada tipografi. Ini dilaksanakan dengan elegan dengan kedudukan melekit CSS:

 .sticky-thing {
  Kedudukan: melekit;
  Atas: 75px;
}

Reka bentuk minimalis, yang mengutamakan tipografi, mencipta pengalaman pengguna yang fokus dan tidak rapi-kontras yang menyegarkan dengan banyak laman web yang dipenuhi gangguan.

Atas ialah kandungan terperinci Laman web yang kami suka: MD Nichrome. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!