Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Profile Card CSS

Cách Tạo Profile Card CSS


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

Tạo Profile Card CSS

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu cách xây dựng một thẻ người dùng giúp các bạn có thể ôn lại và thực hành một số kiến thức HTML, CSS mà mình đã học. Để hiểu rõ hơn các bạn cùng mình tìm hiểu nhé!

Tạo Cấu Trúc HTML Cho Profile Card

Đi vào bước thứ nhất các bạn tạo một thư mục có cấu trúc file như sau nhé:

Cấu trúc Thư Mục PagePiling

Sau khi đã tạo xong cấu trúc thư mục thì bước tiếp theo là các bạn tải một tập tin mà mình đã chứa sẵn các file đã được nén để ở đường dẫn bên dưới giúp chúng ta có thể thực hiện thẻ người dùng mà không mất công phải xây dựng lại từ đầu. Ở đây các bạn có thể chọn phiên bản Font Awesome cao hơn hay những hình ảnh tùy thích miễn sao bạn cảm thấy phù hợp với mình là được.
Tải File The_nguoi_dung

Bây giờ mình sẽ tạo cấu trúc file HTML, thêm các thẻ HTML cần thiết cho trang_chinh.html sau đó liên kết nó với file style.css, Font Awesome và Google Font. Các bạn lưu ý là đường dẫn style.css lúc nào cũng nằm dưới cùng trong thẻ <head> trong một trang HTML bởi vì khi ta chỉnh sửa CSS thì nó sẽ không bị ảnh hưởng bởi các file CSS khác. Để nắm rõ hơn các bạn theo dõ đoạn code dưới đây nhé:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tạo thẻ người dùng CSS</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="noi_dung">
        <div class="the"></div>
        <div class="the"></div>
        <div class="the"></div>
    </div>
</body>
</html>

Bây giờ thì chúng ta cần cài đặt font cho trang HTML và thiết kế layout sơ lược cho từng thẻ <div class="the"> bằng cách hiển thị dưới dạng lưới và thiết lập một số thuộc tính cơ bản như độ rộng, độ cao, khoảng cách cho nó. Để hiểu rõ hơn các bạn xem đoạn code dưới đây nhé :

body{
    margin:0;
    padding:0;
    font-family: 'Open Sans', sans-serif;
}
.noi_dung{
    position: relative;
    width: 1000px;
    margin: 150px auto 0;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 440px;
    grid-gap: 40px;
}
.noi_dung .the{
    position: relative;
    background: #000;
    overflow: hidden;
    border-radius: 10px;
    transition: .5s;
}

Ở đây mình có một vài lưu ý ở đoạn code trên và sẽ được giải thích ở bảng dưới đây:

Thuộc TínhÝ Nghĩa
margin: 150px auto 0;Cái này biểu thị cho margin-top là 150px, margin-left và margin-right là tự động và margin-bottom:0px
display: grid;Đây là hệ thống lưới cơ bản trong CSS bằng cách hiển thị dòng và cột.
grid-template-columns: 1fr 1fr 1frThuộc tính này giúp xác định số cột và và chiều rộng cột có trong hệ thống lưới. Ví dụ ở đây với <div class="noi_dung"> sẽ chia thành 3 cột. Để các bạn hiểu rõ hơn về đơn vị fr thì mình sẽ trang web tham khảo ở đây: Tham Khảo
grid-template-rows: 440px;Thuộc tính này giúp xác định số dòng và độ cao của dòng trong hệ thống lưới. Ví dụ ở dây là dòng có chiều cao 440px.
grid-gap: 40px;Thuộc tính thiết lập khoảng cách giũa dòng và cột ví dụ ở đây là 40px;
overflow: hidden;Thuộc tính này sẽ ẩn những nội dung mà vượt quá chiều rộng hay chiều cao của thẻ HTML chứa nó. Ví dụ ta có hình quá lớn so với thẻ div chứa nó thì những phần bị tràn ra sẽ bị ẩn đi.

Bây giờ chúng ta hãy cùng nhau xem kết quả của đoạn code trên nhé:

Thuộc tính display:grid demo

Tiếp theo chúng ta thêm hình ảnh vào các thẻ <div class="noi_dung"> bằng đoạn code dưới đây nhé:

trang_chinh.html

<div class="noi_dung">
    <div class="the">
        <div class="hinh_anh">
            <img src="hinh_1.jpg">
        </div>
    </div>
    <div class="the">
        <div class="hinh_anh">
            <img src="hinh_2.jpg">
        </div>
    </div>
    <div class="the">
        <div class="hinh_anh">
             <img src="hinh_3.jpg">
        </div>
    </div>
</div>
TThêm element cho HTML

Như các bạn thấy thì hình ảnh nó quá lớn nên chỉ được hiển thị một phần trong thẻ <div class="the">; vì vậy chúng ta cần thiết lập thuộc tính max-width và max-height cho thẻ hình ảnh cũng như thiết lập hiệu ứng làm mờ hình khi ta hover vào hình ảnh. Để nắm rõ hơn các bạn cùng xem đoạn code sau đây nhé:

img {
    max-width: 100%;
    max-height: 100%;
}
.noi_dung .the .hinh_anh{
    position: absolute;
    top:0;
    left:0;
    transition:0.5s;
}
.noi_dung .the:hover .hinh_anh{
    opacity:0.5;
}

Cùng mình xem kết quả của đoạn code trên:

Bây giờ mình sẽ thêm nội dung vào các thẻ <div class="the"> dùng để miêu tả vị trí công việc sở thích... và các icon liên kết mạng xã hội của người dùng. Không mất công đánh văn bản các bạn có thể vào trang Lipsum để có thể tự động tạo những đoạn văn bản. Nào chúng ta cùng xem đoạn code nhé:

<div class="noi_dung">
    <div class="the">
         <div class="hinh_anh">
            <img src="hinh_1.jpg">
        </div>
        <div class="doan_van">
            <h2>Tên Người dùng <br /> <span>UX/UI Designer</span></h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing 
elit. Aliquam dicta, similique alias tempora corrupti recusandae 
nam rem sit voluptas veritatis est itaque eum magnam eveniet 
officiis atque earum rerum provident.
            </p>
            <ul>
                <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-google" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                </ul>
            </div>
    </div>
             <div class="the">
         <div class="hinh_anh">
            <img src="hinh_2.jpg">
        </div>
        <div class="doan_van">
            <h2>Tên Người dùng <br /> <span>UX/UI Designer</span></h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing 
elit. Aliquam dicta, similique alias tempora corrupti recusandae 
nam rem sit voluptas veritatis est itaque eum magnam eveniet 
officiis atque earum rerum provident.
            </p>
            <ul>
                <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-google" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                </ul>
            </div>
    </div>
    <div class="the">
        <div class="hinh_anh">
           <img src="hinh_3.jpg">
       </div>
       <div class="doan_van">
           <h2>Tên Người dùng <br /> <span>UX/UI Designer</span></h2>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing 
elit. Aliquam dicta, similique alias tempora corrupti recusandae 
nam rem sit voluptas veritatis est itaque eum magnam eveniet 
officiis atque earum rerum provident.
           </p>
           <ul>
               <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
               <li><a href="#"><i class="fa fa-google" aria-hidden="true"></i></a></li>
               <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
               </ul>
           </div>
   </div>
</div>

Nhìn có vẻ hơi nhiều nhưng các bạn đừng lo lắng quá vì mình chỉ lập lặp <div class="doan_van"> cho từng thẻ <div class="the">. Bây giờ chúng ta cần chỉnh một chút file style.css chỉnh vị trí, thiết lập độ rộng, độ cao... của thẻ <div class="doan_van">. Để nắm rõ hơn các bạn xem đoạn code sau đây nhé:

.noi_dung .the .doan_van{
    position: absolute;
    width: 100%;
    height: 45%;
    bottom: -100%;
    padding:24px;
    box-sizing: border-box;
    font-size: 0.6rem;
    text-align: center;
    transition: 0.5s;
}
.noi_dung .the:hover .doan_van{
    bottom: 0;
}

Một lưu ý là khi mình thiết lập cho <div class="doan_van"> với bottom: -100%; dùng để ẩn nó đi và tạo hiệu ứng khi chúng ta hover <div class="the"> thì nội dung sẽ chạy từ dưới lên bằng cách là .noi_dung .the:hover .doan_van{ bottom: 0; }. Để hiểu rõ hơn hãy cùng mình xem kết quả nhé:

Chúng ta sẽ thiết lập background linear-gradient giúp cho thẻ <div class="doan_van"> sinh động và bắt mắt hơn và đây là trang tham khảo thêm về thuộc tính này nếu như các bạn muốn nắm rõ hơn: Thamk Khảo. Để hiểu rõ hơn các bạn xem đoạn code dưới đây nhé:

.noi_dung .the:nth-child(1) .doan_van{
    background: linear-gradient(0deg, #c21833, transparent);
}
.noi_dung .the:nth-child(2) .doan_van{
    background: linear-gradient(0deg, #8012a5, transparent);
}
.noi_dung .the:nth-child(3) .doan_van{
    background: linear-gradient(0deg, #3a414c, transparent);
}

Và đâ là kết quả của đoạn code tên cùng xem với mình nhé:

Bây giờ công việc cuối cùng của chúng ta là thay đổi màu sắc, cỡ chữ cho nội dung trong thẻ <div class="doan_van"> và thiết kế lại các icon mạng xã hội một tí. Để hiểu rõ hơn các bạn xem đoạn code dưới đây nhé:

.noi_dung .the .doan_van h2{
    margin: 0 0 10px;
    padding:0;
    color:#fff;
    font-size:20px;
}
.noi_dung .the .doan_van h2 span{
    color:#ccc;
    font-size:16px;
}
.noi_dung .the .doan_van p{
    color:#fff;
    font-size:10px;
}
.noi_dung .the .doan_van ul {
    display:flex;
    margin: 20px 0 0;
    padding:0;
    align-items: center;
    justify-content: center;
}
.noi_dung .the .doan_van ul li{
    list-style-type: none;
}
.noi_dung .the .doan_van ul li a{
padding:0 10px;
font-size:12px;
color:#fff;
transition: 0.5s;
}
.noi_dung .the:hover{
    transform: translateY(-20px);
}

Và các bạn xem kết quả cuối cùng nhé:

Mình gửi các bạn đường dẫn để tải về những file trong thư mục The_nguoi_dung để bạn đễ hình dung và có thể xem lại!
Đường dẫn tải File Source Code

Các bạn có thể tìm hiểu thêm thông qua đường dẫn dưới đây nhé!
Đường dẫn để bạn tìm hiểu thêm

Nếu bạn muốn tham khảo thêm profile card khác thì truy cập ở dường dẫn bên dưới nha.
Những Profile Card Trong Thiết Kế Và Phát Triển Web

Tổng kết:

Qua đây mình giúp các bạn có thể làm sinh động cũng như sáng tạo hơn với trang web của mình 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ẻ!

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.