Komponen Kartu dengan Properti Khusus CSS
Bangun komponen kartu fleksibel yang sepenuhnya digerakkan oleh properti khusus CSS agar temanya mudah diubah.
Komponen Kartu dengan Properti Khusus CSS adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Sasaran Desain
Komponen kartu adalah wadah mandiri untuk konten. Sasaran desainnya adalah padding yang konsisten menggunakan token spasi, warna yang dapat diberi tema menggunakan token alias, ukuran responsif tanpa JS, serta dukungan varian (ditinggikan, bergaris tepi, datar) melalui properti kustom CSS.
Struktur Dasar Kartu
Gunakan satu kelas .card dengan properti kustom CSS untuk nilai yang dapat dikonfigurasi. Elemen internal (kepala, isi, kaki) mewarisi dari cakupan kartu. Hal ini membatasi perbedaan gaya antarinstans kartu di seluruh basis kode.
<div class="card">
<h3>Card Title</h3>
<p>Card content styled via custom properties.</p>
</div>
Kelas Varian
Timpa properti kustom tingkat kartu dengan kelas varian, bukan dengan menulis kumpulan aturan terpisah. Kelas varian hanya perlu mendefinisikan ulang variabel yang berubah—properti yang tidak berubah secara otomatis mewarisi nilai dasar tanpa pengulangan.
<div class="card card--elevated">
<p>Elevated variant</p>
</div>
<div class="card card--outlined">
<p>Outlined variant</p>
</div>
Pemberian Tema pada Kartu
Saat kelas tema induk mengubah --color-surface, semua kartu di dalam tema tersebut secara otomatis memperbarui latar belakangnya. Tidak diperlukan kode penggantian tema khusus kartu—sistem token alias menanganinya secara transparan.
Jarak Dalam Kartu Responsif
Gunakan clamp() dengan penggantian properti kustom untuk jarak dalam yang fleksibel: --card-padding: clamp(1rem, 4vw, 2rem). Layar yang lebih besar mendapatkan jarak dalam yang lebih lega; layar kecil mendapatkan jarak dalam minimal—semuanya dikendalikan dari satu definisi token.
Tata Letak Kisi Kartu
Kisi kartu yang menggunakan pengisian otomatis pada CSS Grid dengan minmax menghasilkan tata letak yang dapat mengatur dirinya sendiri: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)). Kartu mengisi ruang yang tersedia dan otomatis berpindah ke baris berikutnya tanpa titik henti kueri media.
Rasio Aspek Gambar
Pertahankan rasio aspek gambar kartu yang konsisten dengan aspect-ratio: 16/9 pada wadah gambar. Gambar memenuhi wadah dengan object-fit: cover, sehingga tinggi kartu tetap seragam terlepas dari dimensi gambar sumber.
Keadaan Interaktif
Tambahkan keadaan saat diarahkan dan saat elemen di dalam kartu mendapat fokus agar kartu sedikit terangkat: transform: translateY(-2px) dan box-shadow yang diperbesar. Animasikan dengan transition: transform 200ms ease, box-shadow 200ms ease agar umpan balik interaksi terasa halus dan efisien bagi kompositor.
Tautan Kartu yang Aksesibel
Buat seluruh kartu dapat diklik dengan tautan yang diperluas: posisikan kartu secara relatif, lalu posisikan tautan utama secara absolut dengan inset: 0. Pembaca layar membacakan teks tautan; lapisan tersebut menutupi kartu secara visual bagi pengguna tetikus.
Keadaan Pemuatan
Tambahkan varian .card--loading yang mengganti konten dengan efek kilau kerangka menggunakan animasi CSS: background: linear-gradient(90deg, var(--color-skeleton-from), var(--color-skeleton-to)) yang dianimasikan dengan background-size: 200% dan animation: shimmer 1.5s infinite.
Kartu Mode Gelap
Dalam mode gelap, token --color-surface otomatis berubah dari terang menjadi gelap. Jika kartu yang terangkat mengandalkan box-shadow untuk memberikan kedalaman (yang menghilang pada latar belakang gelap), tambahkan garis tepi halus atau tingkatkan kontras warna permukaan agar elevasi pada mode gelap tetap terlihat.
Uji Pemahaman
Bagaimana properti kustom CSS memungkinkan pembuatan varian kartu tanpa menggandakan seluruh rangkaian aturan?
Ringkasan
Membangun komponen kartu dengan properti kustom CSS menghasilkan komponen dasar UI yang fleksibel, dapat diberi tema, dan mendukung berbagai varian. Variabel dasar menetapkan nilai bawaan; kelas varian menggantinya secara selektif; kelas tema menggantinya secara global. Jika dipadukan dengan ukuran responsif, penautan yang aksesibel, dan keadaan pemuatan, pola ini dapat digunakan dengan rapi di berbagai sistem desain.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Komponen Kartu dengan Properti Khusus CSS” gratis?
Ya — teks lengkap “Komponen Kartu dengan Properti Khusus CSS” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Komponen Kartu dengan Properti Khusus CSS”?
Bangun komponen kartu fleksibel yang sepenuhnya digerakkan oleh properti khusus CSS agar temanya mudah diubah. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Komponen Kartu dengan Properti Khusus CSS” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Komponen Kartu dengan Properti Khusus CSS
- Penataan Modal dan Dialog
- Pola Menu Tarik Turun dan Popover
- Komponen Tab dengan Trik :checked vs JS