Latihan 1: Shadows & Effects — Tailwind CSS

Latihan 1 dari materi Shadows & Effects di Tailwind CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Bikin kartu kaca buram.

Di <div id="glass"> yang sudah ada, tambahkan atribut class.
Isi class-nya: backdrop-blur-md bg-white/30 rounded-xl p-6 shadow-xl.
id="glass" dan teks Efek Kaca sudah ada di kode awal, biarkan.

Yang dicek pemeriksa: #glass ada, padding-nya 24px (dari p-6), dan border-radius-nya 12px (dari rounded-xl). Latar, blur, dan bayangannya gak dicek.

Di preview latihan, belakang kartunya putih polos, jadi buramnya belum kelihatan. Mau melihat kacanya? Buka Lab di atas, atau Edit di Playground: di sana ada lingkaran warna-warni di belakang kartu.

Hint

Efek kaca butuh tiga hal: buram di belakang elemen, latar yang tembus pandang, dan sesuatu di belakangnya yang bisa diburamkan.
Pakai backdrop-blur-md untuk buramnya, bg-white/30 untuk latar putih tipis, lalu rounded-xl, p-6 dan shadow-xl untuk bentuk, jarak dalam, dan bayangannya.
<div id="glass" class="backdrop-blur-md bg-white/30 rounded-xl p-6 shadow-xl">Efek Kaca</div>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Shadows & Effects — Tailwind CSS

Hint

Memperbarui Aplikasi