Tìm hiểu cách thiết kế thành phần Thẻ giao diện người dùng đơn giản, đẹp mắt cho trang web của bạn bằng HTML và CSS. Bạn cũng sẽ học “mẹo” chuyển màu tuyến tính để làm cho văn bản của bạn nổi bật hơn một chút mà không làm cho thẻ của bạn quá tối.
Thẻ giao diện người dùng là một thành phần giao diện người dùng đóng vai trò như một loại món khai vị trên các trang web. Thẻ giao diện người dùng thông thường chứa văn bản, hình ảnh, biểu tượng và một hoặc một số yếu tố tương tác (chẳng hạn như các nút hoặc liên kết).
Thẻ giao diện người dùng có thể đơn giản hoặc phức tạp tùy theo nhu cầu của bạn.
Hôm nay chúng tôi đang thiết kế một Thẻ giao diện người dùng đơn giản, cái này:
Thẻ giao diện người dùng này có hình nền là phong cảnh, hai yếu tố văn bản (tiêu đề và mô tả) và một giao diện lớn có thể nhấp được:toàn bộ thẻ là một liên kết.
Bạn có thể tìm thấy rất nhiều miễn phí, những bức ảnh phong cảnh tuyệt đẹp tại Unsplash.com.
Bước 1:HTML
Thêm HTML này vào tài liệu của bạn (bên trong <body> phần tử):
<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="Landscape photography of the Northern Sea of Denmark" />
<div class="card-text-container">
<div class="card-text-wrapper">
<h3 class="card-title">The North Sea of Denmark</h3>
<p class="card-description">
Explore the beautiful & dynamic North Sea of Denmark — where every day
is a new experience.
</p>
</div>
</div>
</div>
</a>Phần quan trọng của đánh dấu HTML ở trên là chúng tôi đang bao bọc toàn bộ thẻ bên trong một phần tử liên kết. Chúng tôi làm điều này cho thẻ cụ thể này vì chúng tôi muốn toàn bộ giao diện người dùng là một liên kết lớn có thể nhấp được.
Để tạo liên kết cố định đến đúng bài đăng blog, bài viết (bất kỳ nội dung nào bạn muốn liên kết đến), chỉ cần thay thế thuộc tính trình giữ chỗ (href="#" ) với một slug thực, ví dụ:href="/northern-sea-of-denmark" .
Bước 2:CSS
Trước tiên, tôi sẽ cung cấp CSS được sử dụng cho ví dụ về Thẻ giao diện người dùng, sau đó tôi sẽ giải thích các phần quan trọng nhất của mã 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 hoạt động của CSS:
-
.card:để làm cho thẻ giao diện người dùng đáp ứng, nó có chiều rộng tối đa là 400px. Điều này làm cho chiều rộng của thẻ động. Nó sẽ không bao giờ mở rộng hơn 400px, tuy nhiên, nó sẽ tự động thu nhỏ (thu hẹp hơn) nếu chiều rộng màn hình nhỏ hơn 400px. Chiều cao của thẻ là cố định (height: 350px) và sẽ không thay đổi bất kể kích thước màn hình. -
.card-thumbnail:để tránh làm cho hình nền mất tỷ lệ co (giãn) khi tỷ lệ co của thẻ thay đổi, chúng tôi sử dụngobject-fit: cover. Hãy thử xóa nó và xem điều gì sẽ xảy ra (không tốt). -
.card-text-container:để đảm bảo rằng vị trí và khoảng cách của các phần tử văn bản (khoảng trắng) vẫn nhất quán, bất kể Thẻ giao diện người dùng được xem trên thiết bị nào, chúng tôi sử dụngbottom: 10%. Vì chiều cao thẻ được đặt thành 350 pixel cố định, nên dễ dàng giữ khoảng cách giữa các phần tử văn bản với đáy thẻ gần như nhất quán 100%.z-index: 1;giữ các phần tử văn bản ở trên cùng của lớp phủ. -
.card-text-wrapper:lớp này kiểm soát chiều rộng tối đa của cả hai phần tử văn bản (tiêu đề và mô tả). Vì chúng tôi không bao giờ muốn nó vượt quá chiều rộng của thẻ, chúng tôi đặt nó thành giá trị300px, nhỏ hơn 25% so với chiều rộng tối đa của thẻ (400px). Chúng tôi cũng cung cấp cho nó một chút đệm bên trái và bên phải (1rem), vì vậy luôn có một chút khoảng cách giữa các phần tử văn bản và đường viền của màn hình (quan trọng trên các thiết bị nhỏ). -
.card-overlay:vì văn bản màu trắng trên nền sáng không hoạt động, chúng tôi cần độ tương phản tối. Tuy nhiên, bạn không muốn làm cho toàn bộ hình ảnh quá tối (sau đó, ý của bạn là gì?). Do đó, chúng tôi sử dụnglinear-gradientcó chức năng tạo lớp phủ từ sáng đến tối, với một ít bóng tối ở nửa trên của hình ảnh (nơi không có văn bản) nhưng đủ tối ở nửa dưới để làm cho văn bản nổi lên.
Mẹo &Ý tưởng
Trên các Thẻ giao diện người dùng như thế này, nơi nhiếp ảnh là một phần quan trọng của câu chuyện, điều quan trọng là không làm cho thẻ quá chật (ví dụ:xem xét kích thước văn bản của bạn). Tôi nghĩ đến điều này khi tôi tạo kiểu bằng CSS. Bạn nên luôn xem xét bối cảnh cụ thể của thẻ mà bạn đang thiết kế.
Sử dụng các phong cách từ hướng dẫn này làm kim chỉ nam, nhưng không phải là các quy tắc nghiêm ngặt về thiết kế Thẻ giao diện người dùng. Dưới đây là một số hướng dẫn chung / mục tiêu về thiết kế Thẻ giao diện người dùng:
- Khoảng cách là rất quan trọng: thiếu khoảng trắng làm cho thiết kế của bạn trông đông đúc và ngột ngạt. Giao diện người dùng của bạn cần thở, giống như bạn làm. Sử dụng càng nhiều khoảng cách (khoảng đệm, lề, chiều cao dòng) càng tốt (tất nhiên là không vi phạm Luật tiệm cận).
- Kiểu chữ: cho dù bạn định dạng các thành phần văn bản của mình như thế nào (lựa chọn phông chữ, kích thước phông chữ, chiều cao dòng, v.v.), hãy đảm bảo rằng văn bản dễ đọc, trên bất kỳ kích thước màn hình nào. Thay vì tăng kích thước phông chữ (và chiếm nhiều không gian hơn), hãy thử tăng độ tương phản màu giữa văn bản của bạn và nền, như chúng tôi đã làm với
.card-overlaylớp học. - Giao diện có thể nhấp dễ dàng: nếu các yếu tố trên thẻ của bạn được cho là được nhấp vào, hãy làm cho chúng đủ lớn để bất kỳ ai cũng có thể dễ dàng nhấp hoặc nhấn chúng bằng chuột hoặc ngón tay cái.
Ngoài ra, không có quy tắc thiết kế Thẻ giao diện người dùng, chỉ có ngữ cảnh.