Trình tạo card CSS

CSS được tạo gồm những gì

Công cụ tạo ra một lớp duy nhất tên .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 là màu bạn đã chọn
• border luôn là nét liền 1 px với màu bạn đã chọn
• border-radius và padding là giá trị bạn chọn, tính bằng px
• box-shadow dùng độ dịch chuyển cố định 4 px xuống dưới cùng giá trị mờ và độ đậm của bạn

Bản xem trước chỉ là mẫu

Bản xem trước hiển thị một tiêu đề và một đoạn văn để bạn đánh giá tỷ lệ. Công cụ không xuất HTML: hãy áp lớp cho vùng chứa của riêng bạn và thêm tiêu đề, văn bản, hình ảnh hoặc nút hành động vào bên trong. Nếu card nằm trên nền trang có màu, hãy kiểm tra độ tương phản của viền tại đó, không chỉ trong bản xem trước.

Giới hạn hợp lý

Giá trị dưới 0 bị chặn về 0 và độ đậm của bóng nằm trong khoảng 0 đến 1. Giá trị đệm hoặc độ mờ rất lớn có thể tạo kết quả bất ngờ, vì vậy hãy giữ các điều khiển trong khoảng bạn thường dùng ở bố cục thực tế.

Kết hợp với mã của riêng bạn

Ví dụ tối giản cho trang của bạn:

<div class="card">
  <h3>Tên sản phẩm</h3>
  <p>Mô tả ngắn</p>
</div>

Kiểu vùng chứa không giới hạn nội dung bên trong: nó chỉ xử lý nền, viền, khoảng cách và bóng đổ.