Tìm hiểu cách thiết kế component UI Card đơn giản, đẹp cho website với HTML và CSS. Bạn cũng sẽ học một "mẹo" linear-gradient để làm nổi bật text hơn mà không làm card quá tối.
UI Card là một component UI đóng vai trò như món khai vị trên website. Một UI Card điển hình chứa text, hình ảnh, icon, và một hoặc nhiều element tương tác (như button hoặc link).
UI Card có thể đơn giản hoặc phức tạp tùy nhu cầu của bạn.
Hôm nay chúng ta thiết kế một UI Card cực đơn giản, đây là nó:
UI Card này có hình nền phong cảnh, hai element text (tiêu đề và mô tả), và một giao diện clickable lớn: toàn bộ card là một link.
Bạn có thể tìm nhiều ảnh phong cảnh miễn phí, đẹp tại Unsplash.com.
Bước 1: HTML
Thêm HTML này vào document (bên trong element <body>):
<a class="card-link" href="#"> <div class="card"> <div class="card-overlay"></div> <img class="card-thumbnail" src="/images/the-north-sea-denmark.png" alt="Ảnh phong cảnh Biển Bắc Đan Mạch" /> <div class="card-text-container"> <div class="card-text-wrapper"> <h3 class="card-title">The North Sea of Denmark</h3> <p class="card-description"> Khám phá Biển Bắc Đan Mạch đẹp mắt & động — nơi mỗi ngày là trải nghiệm mới. </p> </div> </div> </div> </a>Phần quan trọng của markup HTML trên là chúng ta wrap toàn bộ card bên trong element anchor. Chúng ta làm vậy cho card này vì muốn toàn bộ giao diện người dùng là một link clickable lớn.
Để anchor link đến bài viết, bài báo đúng (bất kỳ nội dung nào bạn muốn link), chỉ cần thay placeholder attribute (href="#") bằng slug thật, ví dụ href="/northern-sea-of-denmark".
Bước 2: CSS
Trước tiên, tôi cung cấp CSS dùng cho ví dụ UI Card, sau đó giải thích các phần quan trọng nhất của code bên dưới:
.card { position: relative; height: 350px; max-width: 400px; } .card-thumbnail { height: 100%; max-width: 100%; display: block; object-fit: cover; } .card-text-container { width: 100%; position: absolute; left: 0; bottom: 10%; z-index: 2; display: flex; flex-direction: column; align-items: center; } .card-text-wrapper { padding-left: 1rem; padding-right: 1rem; max-width: 300px; color: white; } .card-title { font-size: 1.45rem; margin-bottom: 0; } .card-description { font-size: 1.15rem; line-height: 1.4; margin-top: 0.5rem; } .card-overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); z-index: 1; }Cách CSS hoạt động:
.card: để làm UI card responsive, nó có max-width 400px. Điều này làm chiều rộng card động. Nó không bao giờ rộng hơn 400px, tuy nhiên sẽ tự động thu hẹp nếu chiều rộng màn hình nhỏ hơn 400px. Chiều cao của card cố định (height: 350px) và không thay đổi bất kể kích thước màn hình..card-thumbnail: để tránh làm hình nền mất tỷ lệ (bị kéo dãn) khi tỷ lệ card thay đổi, ta dùngobject-fit: cover. Hãy thử xóa nó và xem chuyện gì xảy ra (không tốt)..card-text-container: để đảm bảo vị trí và khoảng trắng (white space) của các element text nhất quán, bất kể thiết bị nào xem UI Card, ta dùngbottom: 10%. Vì chiều cao card cố định 350 pixel, dễ dàng giữ khoảng cách text từ đáy card gần như 100% nhất quán.z-index: 1;giữ text elements nằm trên overlay..card-text-wrapper: class này kiểm soát max-width của cả hai element text (tiêu đề và mô tả). Vì không bao giờ muốn nó vượt quá chiều rộng card, ta đặt giá trị300px, ít hơn 25% so với max-width của card (400px). Ta cũng cho nó padding trái/phải1rem, để luôn có khoảng cách giữa text elements và viền màn hình (quan trọng trên thiết bị nhỏ)..card-overlay: vì text trắng trên nền sáng không hoạt động, ta cần độ tương phản tối. Tuy nhiên, không muốn làm toàn bộ ảnh quá tối (thì làm ảnh làm gì?). Do đó, ta dùng hàmlinear-gradienttạo overlay sáng-đến-tối, ít tối ở nửa trên ảnh (không có text) nhưng đủ tối ở nửa dưới để text nổi bật.
Mẹo & Ý tưởng
Trên các UI Card như thế này, nơi nhiếp ảnh là phần lớn câu chuyện, quan trọng là không làm card quá chật chội (ví dụ, cân nhắc kích thước text). Điều này tôi lưu ý khi style bằng CSS. Bạn nên luôn cân nhắc ngữ cảnh cụ thể của card bạn đang thiết kế.
Dùng các style từ hướng dẫn này làm tham chiếu, không phải quy tắc cứng nhắc về thiết kế UI Card. Dưới đây là một số hướng dẫn phổ quát/mang tính khách quan về thiết kế UI Card:
- Khoảng cách (spacing) là then chốt: thiếu white space làm thiết kế trông chật chội, ngột ngạt. UI của bạn cần thở, như bạn vậy. Dùng nhiều spacing (padding, margins, line height) càng nhiều càng tốt (miễn không vi phạm Định luật Sự gần kề - Law of Proximity).
- Typography: không importa bạn format text elements thế nào (font selection, font sizes, line height, v.v.), hãy chắc chắn dễ đọc text trên mọi kích thước màn hình. Thay vì tăng font size (và chiếm nhiều không gian), hãy thử tăng độ tương phản màu giữa text và background, như chúng ta làm với class
.card-overlay. - Giao diện dễ click: nếu element trên card được thiết kế để click, hãy làm chúng đủ to để ai cũng dễ click/press bằng chuột hoặc ngón tay.
Ngoài ra, không có quy tắc nào về thiết kế UI Card, chỉ có ngữ cảnh.