Contoh reka bentuk neumorphisme CSS

Neumorphism adalah gaya UI yang menggabungkan reka bentuk rata dan kuasi-fizikal, mencapai kesan tiga dimensi unsur terapung atau kendur melalui bayang-bayang lembut. 1. Latar belakang dan warna unsur perlu sama dengan warna untuk mencapai rasa gabungan, seperti #e0e0e0 untuk kedua -dua badan dan butang; 2. Gunakan bayang -bayang berganda untuk mewujudkan rasa tiga dimensi, dengan bayang -bayang luar 8px 8px 16px #c9c9c9 dan -8px -8px 16px #ffffffff. Apabila ditekan, tukar ke dalam bayangan dalaman dan skala unsur -unsur; 3. Ia disyorkan untuk mengelilingi sudut 12px ~ 20px untuk menjaga lembut; 4. Elakkan sempadan untuk mengekalkan penglihatan yang lancar. Ia boleh digunakan untuk butang, kotak input, suis, kad dan elemen lain. Sebagai contoh, kad menggunakan box -shadow: 10px 10px 20px #c9c9c9, -10px -10px 20px #ffffff. Adalah penting untuk diperhatikan bahawa kontras yang rendah mempengaruhi kebolehbacaan, bayang -bayang yang berlebihan boleh menjejaskan prestasi, dan mungkin tidak mematuhi piawaian akses WCAG. Oleh itu, ia harus digunakan dalam antara muka statik seperti panel instrumen dan pemain muzik yang menekankan kecantikan.

Neumorphism adalah gaya reka bentuk UI yang mencipta kesan "terapung dari latar belakang" atau "tenggelam" melalui bayang -bayang lembut dan warna latar belakang yang kelihatan seperti butang fizikal. Ia menggabungkan kelebihan reka bentuk rata dan reka bentuk simulatif, menekankan kesederhanaan tetapi tiga dimensi.

Berikut adalah contoh reka bentuk Neumorphism CSS yang mudah - butang neumorphic biasa.

✅ Contoh butang neumorphic asas

Html

 <div class = "neumorphic-button"> klik saya </div>

CSS

 .Neumorphic-button {
  lebar: 150px;
  Ketinggian: 60px;
  latar belakang warna: #e0e0e0;
  Radius sempadan: 16px;
  Paparan: Flex;
  Align-item: pusat;
  Justify-Content: Center;
  font-family: 'arial', sans-serif;
  saiz font: 18px;
  Warna: #555;
  kursor: penunjuk;

  /* Kunci: Gunakan kotak bayang-bayang untuk menghasilkan kesan bayangan dalaman dan luaran*/
  kotak bayang-bayang: 
    8px 8px 16px #c9c9c9,
    -8px -8px 16px #ffffff;
  Peralihan: Box-shadow 0.3s mudah, mengubah 0.2s mudah;
}

/* Kesan "tenggelam" apabila ditekan*/
.Neumorphic-button: Aktif {
  kotak bayang-bayang: 
    Inset 4px 4px 8px #c9c9c9,
    inset -4px -4px 8px #ffffff;
  Transform: Skala (0.98);
}

? Keterangan mata reka bentuk

1. Latar belakang dan warna unsur harus dekat

• Latar belakang kontena (seperti badan) dan latar belakang butang mestilah sama dalam warna untuk mencapai rasa "gabungan".
• Dalam contoh, latar belakang badan juga disyorkan untuk ditetapkan ke #e0e0e0 atau kelabu cahaya tulen.

 badan {
  latar belakang warna: #e0e0e0;
  Margin: 0;
  Paparan: Flex;
  Justify-Content: Center;
  Align-item: pusat;
  Min-ketinggian: 100VH;
}

2. Bayang -bayang berganda adalah kunci

• Shadow Luaran: 8px 8px 16px #c9c9c9 (warna gelap di bahagian bawah kanan)
• Bayangan luaran: -8px -8px 16px #ffffff (warna terang di sebelah kiri atas)
• Apabila kendur, gunakan bayangan di dalam inset untuk membalikkan arah untuk mewujudkan perasaan "menekan ke bawah"

3. Sudut bulat harus lembut

• border-radius: 12px ~ 20px , terlalu tajam akan merosakkan gaya

4. Elakkan menggunakan sempadan

• Sempadan akan memusnahkan rasa "gabungan lancar" dan menggantinya dengan bayang -bayang dan peralihan warna

? Jenis elemen neumorphik yang boleh diperpanjang

Anda boleh menciptanya dengan cara yang sama:

• Kotak input
• Tukar (togol)
• Kad
• Butang papan kekunci nombor

Sebagai contoh, kad Neumorphic:

 .Neumorphic-Card {
  Lebar: 200px;
  Ketinggian: 120px;
  latar belakang warna: #e0e0e0;
  Radius sempadan: 20px;
  Padding: 20px;
  kotak bayang-bayang: 
    10px 10px 20px #c9c9c9,
    -10px -10px 20px #ffffff;
}

⚠️ Nota

• Kontras Rendah : Neumorphism kurang dibaca di skrin kecil atau cahaya yang kuat, berhati -hati untuk digunakan dalam operasi kritikal
• Bayang -bayang yang berlebihan mempengaruhi prestasi : terutamanya pada peranti mudah alih
• Isu Kebolehcapaian : Perbezaan warna yang tidak mencukupi mungkin tidak mematuhi piawaian WCAG

Pada dasarnya itu sahaja. Gaya ini sangat "tampan", tetapi ia harus digunakan dalam senario yang sesuai, seperti papan pemuka, pemain muzik UI, panel tetapan, dan lain-lain yang menekankan kecantikan.

Atas ialah kandungan terperinci Contoh reka bentuk neumorphisme CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!