Generator Desain Kartu
Rancang komponen kartu CSS yang indah secara visual. Sesuaikan latar belakang, batas, bayangan, padding, dan konten, lalu salin kode HTML + CSS siap produksi dengan satu klik.
Presets
Background
Border
Border Radius
Shadow
Padding
Hover Effect
Dimensions
Generated Code
<style>
.card-designer {
}
.card-designer-image {
flex-shrink: 0;
}
</style>
<div class="card-designer" style="width: min(360px, 100%); min-height: auto; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); overflow: hidden; transition: all 0.2s ease; position: relative; display: flex; flex-direction: column;">
<div class="card-designer-image" style="height: 180px; background: linear-gradient(135deg, #6366f188, #6366f144); border-radius: 12px 12px 0 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; font-weight: bold;">
š¼ļø
</div>
<div class="card-designer-content" style="padding: 24px 24px 24px 24px;">
<h3 class="card-designer-title" style="margin: 0 0 8px 0; font-size: 1.25rem; font-weight: 600; line-height: 1.4; color: #0f172a;">Card Title</h3>
<p class="card-designer-body" style="margin: 0 0 12px 0; font-size: 0.875rem; line-height: 1.6; color: #475569;">This is a sample card body. Replace this text with your own content to see how it looks in the card design.</p>
<div class="card-designer-footer" style="margin-top: auto; padding-top: 12px; border-top: 1px solid #e2e8f0; font-size: 0.75rem; color: #64748b;">Card Footer</div>
</div>
</div>Fitur
- Pembuat Kartu Visual: Sesuaikan setiap aspek kartu Anda - latar belakang, batas, bayangan, bantalan, dan warna - semuanya dengan pratinjau waktu nyata. Tidak diperlukan pengetahuan CSS.
- Bersihkan Output HTML + CSS: Salin kode HTML dan CSS siap produksi dengan satu klik. Kode yang dihasilkan menggunakan nama kelas semantik dan properti CSS modern yang berfungsi di mana saja.
- 6 Desain Preset: Mulai dari preset yang dikurasi: putih bersih, aksen gradien, elegan gelap, cahaya neon, pastel lembut, dan aksen tepi. Setiap preset dapat disesuaikan sepenuhnya.
- Termasuk Efek Melayang: Tambahkan efek melayang interaktif - angkat, bercahaya, sorotan batas, atau skala - tanpa menulis satu baris pun CSS. Semua efek menggunakan transisi CSS yang mulus.
Kasus Penggunaan
- Kartu Blog & Artikel: Buat tata letak kartu yang konsisten untuk pratinjau postingan blog dengan gambar unggulan, judul, kutipan, dan metadata - cocok untuk halaman arahan yang banyak konten.
- Profil Anggota Tim: Rancang kartu anggota tim dengan placeholder avatar, nama, peran, dan bagian bio. Gunakan desain prasetel dan sesuaikan warna aksen per kartu.
- Kartu Produk: Buat kartu produk e-niaga dengan area gambar, nama produk, deskripsi, dan bagian footer untuk harga atau tombol ajakan bertindak.
- Widget Dasbor: Buat widget kartu dasbor dengan latar belakang khusus, batas halus, dan efek hover untuk panel visualisasi data interaktif.
- Kisi Fitur: Buat kartu tampilan fitur untuk laman landas dengan ikon atau gambar di bagian atas, judul fitur, dan teks isi deskriptif dalam tata letak kisi yang responsif.
- Kartu Buletin Email: Rancang blok konten email berbasis kartu dengan warna latar belakang solid, sudut membulat, dan tipografi bersih yang ditampilkan dengan baik di klien email.
Pertanyaan yang Sering Diajukan
Komponen kartu adalah wadah UI mandiri yang biasanya digunakan untuk mengelompokkan konten terkait - seperti gambar, judul, deskripsi, dan tombol tindakan - ke dalam satu unit visual. Kartu dibuat dengan HTML standar (elemen div) dan ditata dengan properti CSS seperti latar belakang, batas, radius batas, bayangan kotak, dan bantalan.
Salin kode HTML + CSS yang dihasilkan dan tempel ke proyek Anda. Kode tersebut menyertakan tag gaya dengan CSS dan markup kartu HTML. Untuk produksi, Anda dapat mengekstrak CSS ke dalam stylesheet Anda dan menyimpan HTML di komponen Anda. Nama kelas diawali dengan "perancang kartu" untuk menghindari konflik.
Ya! Atur bidang Lebar di tab Desain. Gunakan px untuk lebar tetap (misalnya, "360px"), persentase untuk lebar yang dapat diubah (misalnya, "100%"), atau fungsi CSS seperti min() (misalnya, "min(360px, 100%)") untuk perilaku responsif. Pratinjau diperbarui secara real-time sehingga Anda dapat melihat tampilannya secara persis.
Lima efek hover: Lift (memindahkan kartu ke atas dengan bayangan), Glow (menambahkan bayangan cahaya berwarna), Border (menyoroti batas), Scale (memperbesar secara perlahan), dan None. Setiap efek menggunakan transisi CSS yang mulus (kemudahan 0,2 detik) untuk kesan halus. Pilih dari pemilih Efek Melayang di tab Desain.
Ya - aktifkan "Tampilkan placeholder gambar" di tab Konten. Placeholder gradien akan muncul di bagian atas kartu. Anda juga dapat mengatur gambar ke mode "Latar Belakang" yang menyatu dengan konten. Ganti emoji placeholder dan gradien dengan URL gambar Anda yang sebenarnya dalam kode yang dihasilkan.
Bungkus beberapa contoh kartu dalam wadah CSS Grid atau Flexbox. Misalnya: tampilan: kisi; kolom-templat-kisi: ulangi(isi otomatis, minmax(300px, 1fr)); celah: 24 piksel; Ini menciptakan grid responsif dimana kartu secara otomatis disusun ulang berdasarkan lebar viewport.
Warna aksen digunakan untuk sorotan visual: bilah aksen tepi atas pada kartu gaya aksen tepi, gradien placeholder gambar, dan efek cahaya melayang. Ini menambahkan titik kontak warna merek tanpa membebani desain kartu. Atur di tab Konten di bawah Warna Teks.
Kode yang dihasilkan menggunakan properti CSS standar yang didukung di sebagian besar klien email modern (Apple Mail, Outlook untuk Mac, aplikasi Gmail). Untuk email, gunakan warna latar belakang solid (bukan gradien), batas sederhana, dan pembungkus tata letak berbasis tabel di sekitar kartu HTML untuk kompatibilitas yang lebih luas.