Latihan 1: Depth, Shadow & Lighting — UI/UX

Latihan 1 dari materi Depth, Shadow & Lighting di UI/UX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal punya satu <div class="card"> berisi <h3>Kamar Teras</h3> dan harganya di <p>, plus <style> yang masih kosong. HTML-nya biarkan seperti itu. Di dalam <style>, tulis satu aturan .card dengan tiga deklarasi:

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 6px 16px rgba(0,0,0,0.08): dua lapis (kontak lalu ambient) di satu deklarasi, dipisah koma.
border-radius: 0.75rem (12px).
padding: 24px.

Hint

Shadow yang natural punya dua lapis: satu tajam dan dekat (tempat kartu menyentuh halaman), satu samar dan jauh (kesan tinggi).
Dua lapis ditulis di satu deklarasi box-shadow, dipisah koma. Dua deklarasi box-shadow terpisah gak bisa, karena yang kedua menimpa yang pertama. Lalu tambahkan border-radius dan padding di aturan yang sama.
.card { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 6px 16px rgba(0,0,0,0.08); border-radius: 0.75rem; padding: 24px; }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Depth, Shadow & Lighting — UI/UX

Hint

Memperbarui Aplikasi