Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Card Bằng HTML CSS Cho Website

Tạo Card Bằng HTML CSS Cho Website


Ngày 2 Tháng 12 Năm 2020

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo component card cho trang web bằng HTML và CSS nhé!

Tạo Cấu Trúc Cho Card Trong Trang Web

Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html(nơi lưu trữ HTML) và style.css(nơi lưu trữ mã CSS). Sau đó liên kết chúng với Google Font thông qua đoạn mã dưới đây nhé:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Tạo Card HTML CSS</title>
</head>
<body>
</body>
</html>

Thêm Các Phần Tử HTML Cần Thiết Cho Card

Trong phần này chúng ta sẽ đi vào thêm các thẻ HTML cần thiết cho component card để chứa nội dung, tiêu đề và hình ảnh bằng đoạn code sau đây nhé:

HTML

<div class="cards">
<div class="card card1">
    <div class="container">
        <img src="https://images.pexels.com/photos/980221/pexels-photo-980221.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Ảnh 1">
    </div>
    <div class="noi-dung">
        <h3>Việt Nam</h3>
        <p>unde tempore dolores asperiores...</p>
        <button class="btn1">Tìm Hiểu Thêm</button>
    </div>
</div>
<div class="card card2">
    <div class="container">
        <img src="https://images.pexels.com/photos/2067048/pexels-photo-2067048.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Ảnh 2">
    </div>
    <div class="noi-dung">
        <h3>Nhật Bản</h3>
        <p>unde tempore dolores asperiores...</p>
        <button class="btn2">Tìm Hiểu Thêm</button>
    </div>
</div>
<div class="card card3">
    <div class="container">
        <img src="https://images.pexels.com/photos/777059/pexels-photo-777059.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Ảnh 3">
    </div>
    <div class="noi-dung">
        <h3>Singapore</h3>
        <p>unde tempore dolores asperiores...</p>
        <button class="btn3">Tìm Hiểu Thêm</button>
    </div>
</div>
</div>

Và kết quả bạn xem video bên dưới nhé:

Chỉnh Vị Trí Nội Dung Trong Trang Web

Trong phần này chúng ta sẽ sử dụng display: grid; để căn chỉnh vị trí các phần tử card sao cho chúng cân đối ở trong trang web nhé:

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #151320;
    height: 100vh;
    font-family: Roboto;
    display: grid;
    place-items: center center;
    color: #fff;
}
.cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    padding: 20px;
    grid-gap: 40px;
}
.card{
    background-color: #1c1b29;
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
.container{
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
.cards .card .container img{
    width: 100%;
    display: block;
    border-radius: 20px 20px 0 0;
}

Ở đây mình có một lưu ý nhỏ là về thuộc tính clip path. Nó là thuộc tính giúp chúng ta có thể xác định hình ảnh sẽ hiển thị như thế nào trong trang web như là hình tròn, ellipse, polygon... Và nếu bạn muốn tìm hiểu các ví dụ về clip path thì có thể tham khảo ở đây nhé. Còn dưới đầy là hình ảnh kết quả của đoạn mã trên nhé:

card1

Thiết Lập Hiệu Ứng Background

Trong phần tiếp theo chúng ta sẽ đi vào tạo các background linear-gradient cho từng hình ảnh trong component card để giúp nó trông bắt mắt và thu hút người dùng hơn nhé:

CSS

.container::after{
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20px 20px 0 0;
    opacity: 0.6;
}
.card1>.container:after{
    background-image: linear-gradient(135deg, #48c6ef, #6f86d6);
}
.card2>.container:after{
    background-image: linear-gradient(135deg, #2bdce3, #42ffdb);
}
.card3>.container:after{
    background-image: linear-gradient(135deg, #ff758c , #ff7eb3);
}

Và kết quả bạn xem hình ảnh bên dưới nhé:

card2

Thiết Lập Stye Cho Nội Dung Card

Trong phần này chúng ta sẽ đi vào sử dụng các thuộc tính CSS cơ bản để thiết lập style cho nội dung trong component card thông qua đoạn mã bên dưới nhé:

CSS

.noi-dung{
    padding: 20px 10px;
}
.noi-dung h3{
   font-size: 24px;
   margin: 10px 0 15px 0;
}
.noi-dung p{
    color: #a0a0a0;
    font-size: 16px;
    line-height: 30px;
}

Và kết quả bạn xem bên dưới nha:

card3

Thiết Lập CSS Cho Button

Trong phần cuối cùng này chúng ta sẽ đi vào thiết lập style cho thành cuối cùng là button. Và để nắm rõ hơn bạn xem đoạn mã sau nhé:

CSS

button {
    display: block;
    margin-top: 20px;
    float: right;
    border: none;
    outline: none;
    padding: 10px 20px;
    border-radius: 50px;
    color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 3px 20px 0 #0000003b;
}
button:hover{
cursor: pointer;
}
.btn1{
    background-image: linear-gradient(135deg, #48c6ef , #6f86d6);
}
.btn2{
    background-image: linear-gradient(135deg, #2bdce3, #42ffdb);
}
.btn3{
    background-image: linear-gradient(135deg, #ff758c , #ff7eb3);
}

Và kết quả bạn xem bên dưới nha:

card3

Bên dưới là đường dẫn dự án trên Codepen nhé!

Nguồn Codepen

Nếu bạn muốn tham khảo thêm các thiết kế khác về component card thì hãy truy cập đường dẫn bên dưới nhé!

Nguồn Tham Khảo

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức tạo card bằng html css hữu ích việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!