Softonic

Pembuat Kartu CSS

Langkah 1 / 2

Card judul

Ini adalah pratinjau kartu Anda.

Berikutnya

Kartu adalah kontainer di balik ubin produk, pratinjau blog, profil, dan widget dasbor. Pembuat ini menata kontainer tersebut: pilih warna latar dan batas, radius sudut, padding dalam, serta bayangan lembut, lalu lihat hasilnya di halaman. Pratinjau menampilkan konten placeholder; gantilah dengan judul, teks, dan aksi Anda sendiri. Hasilnya berupa satu kelas CSS siap pakai.

Cara menata kontainer kartu

  1. 1

    Pilih warna

    Tentukan warna latar dan warna batas kartu.

  2. 2

    Atur bentuk

    Pilih radius sudut dan padding dalam yang sesuai tata letak Anda.

  3. 3

    Tambahkan bayangan

    Sesuaikan blur dan opasitas bayangan lembut di bawah kartu.

  4. 4

    Pratinjau dan salin

    Periksa pratinjau langsung lalu salin CSS .card yang dihasilkan ke lembar gaya Anda.

Isi CSS yang dihasilkan

Alat ini menghasilkan satu kelas bernama .card:

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
  • background adalah warna yang Anda pilih
  • border selalu 1 px solid dengan warna yang Anda pilih
  • border-radius dan padding adalah nilai pilihan Anda dalam px
  • box-shadow memakai pergeseran tetap 4 px ke bawah dengan nilai blur dan opasitas Anda

Pratinjau adalah placeholder

Pratinjau menampilkan judul dan paragraf agar Anda bisa menilai proporsinya. Alat ini tidak menghasilkan HTML: terapkan kelasnya ke kontainer Anda sendiri dan tambahkan judul, teks, gambar, atau tombol aksi di dalamnya. Jika kartu akan berada di atas latar halaman berwarna, periksa kontras batasnya di sana, bukan hanya di pratinjau.

Batas yang wajar

Nilai di bawah nol dibatasi ke nol dan opasitas bayangan tetap di antara 0 dan 1. Nilai padding atau blur yang sangat besar dapat memberi hasil tak terduga, jadi jaga kontrol tetap dalam rentang yang Anda pakai di tata letak sungguhan.

Menggabungkan dengan markup Anda

Contoh paling sederhana untuk halaman Anda:

<div class="card">
  <h3>Nama produk</h3>
  <p>Deskripsi singkat</p>
</div>

Gaya kontainer tidak membatasi isi di dalamnya: hanya mengatur latar, batas, jarak, dan bayangan.

Pertanyaan yang Sering Diajukan

Tidak. Ia hanya menghasilkan kelas CSS .card. Bangun markupnya sendiri, misalnya div atau article yang membungkus judul, teks, dan aksi Anda.

Batas yang dihasilkan selalu 1 px solid. Ubah baris border di CSS jika perlu ketebalan atau gaya lain.

Pergeseran vertikal tetap 4 px membuat bayangan halus dan mudah dibaca. Anda mengontrol kelembutannya (blur) dan kekuatannya (opasitas).

Tidak. Teks pratinjau hanya untuk tampilan. CSS yang disalin tidak memuat konten, hanya gaya kontainer.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Penghitung FPS

Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.

Generator Warna Acak

Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.

Pemilih Warna HEX

Pilih atau masukkan warna HEX untuk mendapatkan RGB, HSL, perkiraan CMYK, luminans relatif, serta kontras terhadap putih dan hitam.