Belajar CSS #12 : Membuat Shadow di CSS

Anak Males – Kali ini, kita akan belajar membuat shadow di CSS. Shadow sangat peting untuk keperluan website apalagi ui/ux.

UI (User Interface) dan UX (User Experience) adalah dua konsep yang berhubungan dengan bagaimana pengguna interaksi dengan sebuah sistem, termasuk situs web, aplikasi, dan produk lainnya. Kedua konsep ini sering digunakan bersama-sama dalam proses pembuatan produk digital.

UI merujuk pada bagaimana produk terlihat dan seberapa mudah pengguna dapat mengoperasikannya. Ini termasuk element visual seperti layout, warna, font, tombol, dan ikon. Desain UI harus mempertimbangkan bagaimana pengguna akan menavigasi produk dan menemukan informasi yang mereka cari.

UX merujuk pada bagaimana pengguna merasakan produk saat menggunakannya. Ini termasuk faktor-faktor seperti kemudahan penggunaan, kecepatan, dan kepuasan. Desain UX harus mempertimbangkan bagaimana pengguna akan menggunakan produk dan bagaimana produk tersebut dapat memenuhi kebutuhan pengguna dengan efektif.

Jadi, UI adalah tentang bagaimana produk terlihat dan bagaimana pengguna dapat mengoperasikannya, sementara UX adalah tentang bagaimana pengguna merasakan produk saat menggunakannya dan bagaimana produk tersebut memenuhi kebutuhan pengguna.

Seberapa Penting Shadow Didalam UI

Shadow (bayangan) dapat menjadi elemen desain yang berguna dalam UI (User Interface) karena dapat membantu meningkatkan visual hierarchy dan menambahkan depth pada desain.

Shadow dapat digunakan untuk menunjukkan hubungan antara elemen-elemen di layar dan memberikan indikasi kepada pengguna tentang bagaimana elemen tersebut dapat diinteraksi.

Contohnya, shadow dapat digunakan untuk menunjukkan bahwa sebuah elemen merupakan submenu dari elemen lain atau bahwa sebuah elemen dapat diangkat (elevated) saat pengguna mengarahkan mouse ke atasnya.

Shadow juga dapat digunakan untuk menambahkan efek visual pada elemen, seperti memberikan kesan bahwa elemen tersebut terangkat dari layar atau memiliki depth yang lebih.

Namun, shadow tidak selalu penting untuk semua produk dan dapat dilihat sebagai elemen desain yang opsional. Apakah shadow penting atau tidak tergantung pada konteks dan tujuan produk yang bersangkutan.

Jadi, sebelum menambahkan shadow ke dalam desain, pertimbangkan apakah shadow akan membantu meningkatkan user experience dan apakah sesuai dengan visual style yang diinginkan.

Cara Membuat Shadow Di CSS

Untuk membuat shadow (bayangan) pada elemen HTML menggunakan CSS, Anda dapat menggunakan properti box-shadow.

Untuk menambahkan shadow pada elemen, tambahkan properti box-shadow ke dalam aturan CSS untuk elemen tersebut dengan menggunakan sintaks berikut:

box-shadow: h-offset v-offset blur spread color;

• h-offset adalah jarak horizontal shadow dari elemen. Nilai positif akan mengakibatkan shadow bergeser ke kanan, dan nilai negatif akan mengakibatkan shadow bergeser ke kiri.
• v-offset adalah jarak vertikal shadow dari elemen. Nilai positif akan mengakibatkan shadow bergeser ke bawah, dan nilai negatif akan mengakibatkan shadow bergeser ke atas.
• blur adalah ukuran blur shadow. Nilai yang lebih tinggi akan menghasilkan shadow yang lebih blur.
• spread adalah ukuran shadow. Nilai positif akan mengakibatkan shadow yang lebih besar, dan nilai negatif akan mengakibatkan shadow yang lebih kecil.
• color adalah warna shadow. Anda dapat menentukan warna dengan menggunakan kode warna, nama warna, atau notasi RGB/RGBA.

Contoh:

.element {
  box-shadow: 10px 5px 5px 0px rgba(0,0,0,0.75);
}

Di atas adalah contoh penggunaan properti box-shadow untuk menambahkan shadow ke elemen dengan jarak horizontal 10px ke kanan, jarak vertikal 5px ke bawah, blur 5px, tidak ada spread, dan warna shadow adalah hitam 75% opaque.

Anda juga dapat menambahkan lebih dari satu shadow dengan memisahkan setiap shadow dengan koma. Contoh:

.element {
  box-shadow: 10px 5px 5px 0px rgba(0,0,0,0.75),
              -10px 5px 5px 0px rgba(0,0,0,0.75);
}

Di atas adalah contoh penggunaan properti box-shadow untuk menambahkan dua shadow ke elemen, satu dengan jarak horizontal 10px ke kanan dan satu lagi dengan jarak horizontal -10px ke kiri (atau 10px ke kanan dari sisi kiri elemen).

Penutup

Baiklah, mungkin sekian untuk tutorial tentang cara membuat shadow di CSS. Sampai jumpa di tutorial berikutnya.