Cara Membuat UI Neumorphic Yang Responsif Menggunakan TailwindCSS - CRUDPRO
Home  ›  Others

Cara Membuat UI Neumorphic Yang Responsif Menggunakan TailwindCSS

Written By Friday, June 16, 2023
Cara Membuat UI Neumorphic Yang Responsif Menggunakan TailwindCSS

Neumorphism, Style interface pengguna yang dicirikan oleh desain flat, dipadukan shadow smoth dan sorotan.

Neumorphism menyatukan perubahan desain flat dan skeuomorphism. Neumorphism, atau soft UI, adalah style visual yang menyatukan warna background, wujud, gradien, sorotan, dan shadow untuk pastikan tombol dan sakelar grafis yang intens. Semuanya memungkinkannya untuk mencapai penampilan plastik yang lembut dan diekstrusi, dan style hampir 3D.

Neumorphic UI mempunyai dark box shadow di bawah dan Box-shadow jelas di atas, yang membuat penampilan dan nuansa jika komponen interface pengguna didorong lewat tampilan.

Dalam tutorial ini, kita akan membuat desain Neumorphic, dan menyaksikan langkah membuat karya seni yang menakjubkan ini.

Memahami Tugas

UI Neumorfik adalah UI khusus, sangat berbeda dari UI normal yang kita kenal, karena menggunakan desain flat dan skeuomorfisme.

Seperti disebutkan sebelumnya, ini terdiri dari dark box shadow di bawah dan light box shadow di atas.

Jika Anda berpengalaman dengan Box-shadow di vanilla CSS, Anda pasti tahu bahwa properti ini dapat mengambil entri sebanyak yang Anda inginkan, asalkan dipisahkan dengan koma (,). Neumorphic UI memanfaatkan keunggulan ini dengan menggunakan dark box shadow di bawah dan light box shadow di atas (kita akan segera melihatnya beraksi).

Struktur Kode

Struktur komponen ini berbeda dengan struktur komponen yang telah kita buat. Meskipun interface terlihat sangat berbeda. kode root yang digaris bawahi adalah sama.

<body>
<!-- First Layer -->
 <div>
<!-- Second Layer -->
  <div>
        <!-- I
            Code goes Here
         -->
            
  </div>
 </div>
    
</body>

Membangun Komponen

Kami akan membangun desain kami secara progresif. Mari kita mulai dengan kategori yang berbeda (Keluaran di bawah)

Cara Membuat UI Neumorphic Yang Responsif Menggunakan TailwindCSS

Untuk bagian ini, seperti inilah tampilan kodenya

<!-- Categories -->
<div class="p-10 shadow-[0.625rem_0.625rem_0.875rem_0_rgb(225,226,228),-0.5rem_-0.5rem_1.125rem_0_rgb(255,255,255)] rounded-lg flex flex-wrap justify-center gap-5 [&>*]:w-[8rem] [&>*]:h-[8rem] [&>*]:rounded-md 
[&>*]:bg-purple-7 [&>*]:py-4 [&>*:hover]:shadow-[0.625rem_0.625rem_0.875rem_0_rgb(225,226,228),-0.5rem_-0.5rem_1.125rem_0_rgb(255,255,255)] [&>*>div]:w-16 [&>*>div]:h-16 [&>*>div]:rounded-full [&>*>div]:text-white 
[&>*>div]:flex [&>*>div]:items-center [&>*>div]:justify-center [&>*>div]:mx-auto [&>*>h2]:text-[0.8rem] [&>*>h2]:mt-4 [&>*>h2]:text-center">

 <div>

<!-- Icon Container -->
   <div class="bg-rose-500">
     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> <path fill="currentColor" d="M5 6C3.355 6 2 7.355 2 9v14c0 1.645 1.355 3 3 3h22c1.645 0 3-1.355 3-3V9c0-1.645-1.355-3-3-3zm0 2h22c.566 0 1 .434 1 1v2H5v2h23v10c0 .566-.434 1-1 1H5c-.566 0-1-.434-1-1V9c0-.566.434-1 1-1z" />
     </svg>
    </div>

<!-- Title -->
    <h2>CREDIT CARD</h2>
</div>

<div class="shadow-[0.625rem_0.625rem_0.875rem_0_rgb(225,226,228),-0.5rem_-0.5rem_1.125rem_0_rgb(255,255,255)]">
<!-- Icon Container -->
    <div class="bg-[#faab70]">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> <path fill="currentColor" d="M26 10h-2.762A4.487 4.487 0 0 0 16 4.707A4.487 4.487 0 0 0 8.762 10H6a2.002 2.002 0 0 0-2 2v4a2.002 2.002 0 0 0 2 2v10a2.002 2.002 0 0 0 2 2h16a2.002 2.002 0 0 0 2-2V18a2.002 2.002 0 0 0 2-2v-4a2.002 2.002 0 0 0-2-2Zm-9-2.5a2.5 2.5 0 1 1 2.5 2.5H17ZM12.5 5A2.503 2.503 0 0 1 15 7.5V10h-2.5a2.5 2.5 0 0 1 0-5ZM6 12h9v4H6Zm2 6h7v10H8Zm16.001 10H17V18h7ZM17 16v-4h9l.001 4Z" />
        </svg>
      </div>
<!-- Title -->
      <h2>GIFT CARDS</h2>
</div>

<div>

<!-- Icon Container -->
  <div class="bg-[#7b90fd]">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18" /> <path d="M16 10a4 4 0 0 1-8 0" />                       </g>
  </svg>
   </div>

<!-- Title -->
    <h2>ORDERS</h2>
 </div>

</div>

Fokus kita akan diletakkan pada div pertama pada kode di atas, karena ini berisi semua kode dari bagian ini. Mari kita memecahkan kode bagian ini.

Untuk wadah utama bagian ini, kami memberikan padding p-10 dan radius batas round-full. Kami membuatnya menjadi wadah fleksibel dengan flex dan memusatkan kontennya di sepanjang sumbu utama menggunakan justify-content justify-center dan memberi konten celah celah-5. Sekarang, untuk mengubah wadah ini menjadi komponen Neumorphic, kami menerapkan double box shadow ini, bayangan-[0.625rem_0.625rem_0.875rem_0_rgb(225.226.228),-0.5rem_-0.5rem_1.125rem_0_rgb(255.255.255)]. Kami memiliki light box shadow atas, -0.5rem_-0.5rem_1.125rem_0_rgb(255.255.255), dan Box-shadow gelap bawah 0.625rem_0.625rem_0.875rem_0_rgb(225.226.228)

Dianjurkan untuk membaca sedikit tentang box-shadow sebelum menjalankan Neumorphic UI, karena ini pada dasarnya memanfaatkan properti yang kuat ini.

Untuk bagian kedua dari kode yang digunakan di div utama ini, kami menggunakan properti tailwindcss [&>*], untuk menargetkan elemen bagian dalam dari wadah ini.

Untuk menggunakan properti ini, Anda harus memiliki pengetahuan yang jelas tentang struktur elemen dalam Anda, sehingga dapat mengetahui cara menargetkannya.

Properti [&>*] secara sederhana berarti "pilih setiap anak satu per satu", ini memungkinkan kita untuk menerapkan properti gaya yang sama ke semua anak langsung.

Untuk setiap anak, kami memberikannya masing-masing lebar dan tinggi w-8 dan h-8, kami juga memberi mereka masing-masing radius batas bulat-penuh, dan blok bantalan py-4

Selain itu, kami juga menambahkan double box shadow untuk setiap anak, yang mengubahnya menjadi Komponen Neumorfik, tetapi ini terlihat saat melayang, kami melakukannya menggunakan [&>*:hover]:shadow-[0.625rem_0.625rem_0.875rem_0_rgb( 225,226,228),-0.5rem_-0.5rem_1.125rem_0_rgb(255.255.255)]

Demikian pula, kami memberi gaya pada sub-child dengan menargetkannya sebagai berikut

  • Penampung Ikon: Untuk menarget penampung ini, kami menggunakan [&>*>div], kami memberi masing-masing lebar dan tinggi w-16 dan h-16, radius batas bulat-penuh, warna teks teks- putih. Selain itu, kami menjadikan penampung sebagai kotak fleksibel dan memusatkan konten menggunakan pusat item flex items-center justify-center dan memberinya margin-inline dari mx-auto
  • Judul: Kami menargetkan elemen ini dengan **[&>*>h2],**kami memberinya ukuran font text-[0.8rem] margin-block-start mt-4 dan memusatkan teks menggunakan text-center

Saya percaya kita memiliki pemahaman yang lebih baik tentang kode di atas sekarang.

Mari kita lanjutkan dengan desain kita.

Cara Membuat UI Neumorphic Yang Responsif Menggunakan TailwindCSS

Bagian ini sangat singkat, berikut tampilannya

<div class="rounded-lg bg-[#e6e9f3] h-full sm:h-20 py-4 my-10 
flex items-center justify-center shadow-[inset_0rem_0.2rem_0.4rem_0_rgb(0,0,0,0.1)]">
   <p class="w-[70%] text-sm">Stay on top of your order status, deals, new messages and more. 
    <span class="text-[#7b90fd] cursor-pointer hover:underline">Enable notifications</span></p>
</div>

Memahami bagian ini sangat mudah. Semua yang kami lakukan adalah memberikannya border-radius dari round-lg, background-color dari bg-[#e6e9f3], margin-inline dan padding-inline dari my-10 dan py-4 secara berturut-turut. Kami juga membuatnya menjadi flexbox menggunakan flex items-center justify-center.

Box-shadow yang digunakan di sini adalah shadow-[inset_0rem_0.2rem_0.4rem_0_rgb(0,0,0,0.1)]

Itu cukup banyak untuk penataan yang rumit

Sekarang bagian terakhir dari desain ini adalah tombol-tombolnya

Cara Membuat UI Neumorphic Yang Responsif Menggunakan TailwindCSS

Untuk tombol, kami menggunakan pendekatan serupa seperti yang disebutkan di atas (berbicara tentang [&>*] ) Saya yakin Anda dapat dengan mudah memahaminya sekarang

<div class="flex justify-between flex-wrap gap-y-5 text-center [&>*]:w-[48%] [&>*]:h-12 [&>*]:cursor-pointer [&>*]:rounded-full [&>*]:border [&>*]:flex [&>*]:items-center [&>*]:justify-center  [&>*:hover]:scale-[1.02] [&>*:active]:scale-100">
    <div class="bg-[#7b90fd] text-white">
         <h2>Continue</h2>
    </div>

    <div class="text-[#7b90fd] bg-white shadow-[0.625rem_0.625rem_0.875rem_0_rgb(225,226,228),-0.5rem_-0.5rem_1.125rem_0_rgb(255,255,255)]">
        <h2>Cancel</h2>
    </div>
</div>

Selain itu, kami menerapkan beberapa gaya pada wadah utama dan layer sebagai berikut

<body class="bg-[#f2f3f9] flex items-center justify-center min-h-screen">
<!-- First Layer -->
 <div>
<!-- Second Layer -->
  <div class="w-full sm:w-[35rem] my-8 [&_*]:transition-all [&_*]:ease-linear">
        <!-- I
            Code goes Here
         -->
            
  </div>
 </div>
    
</body>

Seharusnya cukup banyak.

Kesimpulan

Kami baru saja membangun Neumorphic UI yang sepenuhnya responsif dan bagus dari awal.

Kami memiliki kesempatan untuk juga merevisi pengetahuan kami tentang Vanilla CSS dan menerapkan kekuatan Box Shadows.

Saya harap seperti saya Anda menikmati membangun komponen yang luar biasa ini.

Anda dapat melihat pratinjau langsung di Codepen atau menemukan kode di GitHub

Jangan ragu untuk berbagi dengan saya jika Anda dapat menyelesaikan tutorial di sisi Anda, saya akan senang melihat penambahan gaya yang Anda tambahkan ke kartu Anda.