Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Box-Shadow: Menciptakan Efek Elevasi dan Kedalaman

Dalam desain web, bayangan tidak boleh dibuat sembarangan. Bayangan yang terlalu hitam atau terlalu tajam akan membuat desain terlihat kotor. Rahasia desain modern terletak pada bayangan yang lembut dan berlapis.

1. Anatomi Properti Box-Shadow

Properti ini menerima hingga enam nilai utama:

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

• h-offset: Posisi horizontal bayangan (positif ke kanan, negatif ke kiri).

• v-offset: Posisi vertikal bayangan (positif ke bawah, negatif ke atas).

• blur: Tingkat keburaman. Semakin besar nilainya, semakin lembut bayangannya.

• spread: Ukuran bayangan. Nilai positif memperbesar, negatif memperkecil.

• color: Warna bayangan (sangat disarankan menggunakan rgba untuk mengatur transparansi).

• inset: Opsional. Jika ditambahkan, bayangan akan berada di dalam elemen.

2. Mengimplementasikan Elevasi (Material Design)

Material Design oleh Google menggunakan konsep "Z-index visual". Semakin tinggi sebuah elemen dari latar belakang, semakin besar dan lembut bayangannya.

Elevasi Rendah (Contoh: Card Standar)

Digunakan untuk elemen yang sedikit menonjol namun masih dekat dengan latar belakang.

.card-low { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

Elevasi Tinggi (Contoh: Modal atau Pop-up)

Digunakan untuk elemen yang harus menarik perhatian utama pengguna.

.card-high { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

3. Tutorial: Membuat Efek Bayangan Berlapis (Soft Shadow)

Bayangan yang paling indah di web modern biasanya terdi ri dari dua atau tiga lapis bayangan yang ditumpuk.

Struktur HTML

<div class="box-container"> <div class="elegant-card"> <h3>SatuMedia Cardh3> <p>Desain bersih dengan elevasi modern.p> div>
div>

Kode CSS

.elegant-card { width: 300px; padding: 20px; background: whi te; border-radius: 12px; /* Teknik Layered Shadow agar terlihat sangat halus */ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1);
} .elegant-card:hover { /* Saat di-hover, elevasi naik seolah mendekat ke mata pengguna */ box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); transform: translateY(-< span class="hljs-number">5px);
}

4. Inset Shadow: Efek "Melekok" ke Dalam

Gunakan kata kunci inset untuk menciptakan efek elemen yang tertekan ke dalam permukaan, sering digunakan untuk input field atau tombol yang sedang ditekan.

.input-field { box-shadow: inset 0 2px 4px  rgba(0,0,0,0.06);
}

Tips Pro untuk Developer

1. Hindari Warna Hitam Pekat: Gunakan rgba(0, 0, 0, 0.1) atau rgba(0, 0, 0, 0.2). Warna #000000 tanpa transparansi akan terlihat sangat kaku dan tidak natural.

2. Gunakan Warna Turunan: Untuk desain yang lebih berwarna, buat bayangan menggunakan versi gelap dari warna latar belakang (misal: tombol biru menggunakan bayangan biru tua transpa ran, bukan hitam).

3. Keseimbangan: Jangan memberikan bayangan pada semua elemen. Jika semuanya memiliki bayangan, maka tidak ada elemen yang benar-benar menonjol.

Dengan teknik ini, portal berita SatuM edia atau aplikasi Kolak Pisang yang sedang Anda bangun akan memiliki sentuhan antarmuka kelas dunia yang terasa "hidup".