Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
 Cách Tạo Team Card CSS Và 20 Ví Dụ Thực Tế Trong Thiết Kế Website

Cách Tạo Team Card CSS Và 20 Ví Dụ Thực Tế Trong Thiết Kế Website


Ngày 21 Tháng 1 Năm 2020

Ngày hôm nay chúng ta cùng nhau đi vào thiết kế những team card đẹp cho trang web bằng HTML, CSS và Javascript nhé!

Cách Tạo Team Card CSS

Đầu tiên chúng ta sẽ đi vào tạo cấu trúc phần tử HTML cho team card nhé:

HTML

<div class="row">
  <div class="column">
    <div class="card">
      <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1598930497/face%20image/XzAxOTYwMjUuanBn_h3gwgx.jpg" alt="Jane" style="width:100%">
      <div class="container">
        <h2>Jane Doe</h2>
        <p class="title">CEO & Founder</p>
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
        <p>[email protected]</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1598930497/face%20image/XzAwOTI1ODEuanBn_iln69n.jpg" alt="Mike" style="width:100%">
      <div class="container">
        <h2>Mike Ross</h2>
        <p class="title">Art Director</p>
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
        <p>[email protected]</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1598930496/face%20image/XzA5NjUxNjEuanBn_nzoekz.jpg" alt="John" style="width:100%">
      <div class="container">
        <h2>John Doe</h2>
        <p class="title">Designer</p>
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
        <p>[email protected]</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>
</div>

Tiếp theo chúng ta sẽ đi vào thiết lập style cho nó nhé:

CSS

/* thiết lập chia cột bằng CSS */
.column {
  float: left;
  width: 30%;
  margin-bottom: 16px;
  padding: 0 8px;
}
/* thiết lập chiều dài cột khi màn hình nhỏ hơn 650px*/
@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}
/* thêm shadow cho class card*/
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
/* thêm padding trái và phải*/
.container {
  padding: 0 16px;
}
/* Clear floats */
.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}
.title {
  color: grey;
}
.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: DodgerBlue;
  text-align: center;
  cursor: pointer;
  width: 100%;
}
.button:hover {
  background-color: DeepSkyBlue;
}

Và kết quả cuối cùng bạn xem ở dưới đây nhé:

See the Pen tao team card cho trang web by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn W3School

Nguồn

Cách Tạo Team Flip Card CSS

Tiếp theo chúng ta sẽ đi vào tìm hiểu cách tạo flip team card bằng HTML và CSS nhé!

HTML

<!--Nguồn W3School-->
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1598930497/face%20image/XzAwOTI1ODEuanBn_iln69n.jpg" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1> 
      <p>Architect & Engineer</p> 
      <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old..</p>
    </div>
  </div>
</div>

CSS

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card-front {
  background-color: #bbb;
  color: black;
}
.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

Và kết quả cuối cùng bạn xem ở dưới đây nhé:

See the Pen tao team flip card by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn W3School

Nguồn

Nếu bạn muốn tìm hiểu thêm về các hiệu ứng flip card thì có thể tham khảo ở đây nhé.

Các Ví Dụ Team Card CSS Khác

Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

Cách Tạo Team Card HTML CSS

Team Card HTML CSS

Kết quả bạn xem bên dưới nhé!

See the Pen meet our team by shamim khan (@shamim539) on CodePen.

Nguồn

Thiết Kế Team Section CSS

Team Section CSS

Kết quả bạn xem bên dưới nhé!

See the Pen Nice Diamond Shape Responsive Team Members by Md Nahidul Islam (@thenahidul) on CodePen.

Nguồn

Thiết Kế Profile Card CSS

Profile Card CSS

Kết quả bạn xem bên dưới nhé!

See the Pen our team showcase by Mert Cukuren (@knyttneve) on CodePen.

Nguồn

Thiết Kế Team Member HTML5 CSS3

Team Member HTML5 CSS3

Kết quả bạn xem bên dưới nhé!

See the Pen Team member profile display by Mauritius D'Silva (@mauritiusdsilva) on CodePen.

Nguồn

Hiệu Ứng Hover Profile Card Member

Hover Profile Card Member

Kết quả bạn xem bên dưới nhé!

See the Pen Meet Our Team by Aly (@afasanistan) on CodePen.

Nguồn

Thiết Kế Profile Card UI

Kết quả bạn xem bên dưới nhé!

See the Pen Profile Card UI Design Cool Hover Effect by FrankieDoodie (@FrankieDoodie) on CodePen.

Nguồn

Thiết Kế Team Card Profile

Team Card Profile

Kết quả bạn xem bên dưới nhé!

See the Pen Team Profile by Shane Heyns (@shaneheyns) on CodePen.

Nguồn

Thiết Kế Bootstrap Card Team

Bootstrap Card Team

Kết quả bạn xem bên dưới nhé!

See the Pen Cards Bootstrap 4 by Teja Babu S (@mightyteja) on CodePen.

Nguồn

Thiết Kế Team Card Bootstrap4

Team Card Bootstrap4

Kết quả bạn xem bên dưới nhé!

See the Pen Awesome Team Member Animation with Bootstrap 4 by shamim khan (@shamim539) on CodePen.

Nguồn

Thiết Kế Profile Card Jquery

Profile Card Jquery

Kết quả bạn xem bên dưới nhé!

See the Pen #1344 - Profile Card by LittleSnippets.net (@littlesnippets) on CodePen.

Nguồn

Thiết Kế Team Card Javascript

Team Card Javascript

Kết quả bạn xem bên dưới nhé!

See the Pen #1515 - Profile Card by LittleSnippets.net (@littlesnippets) on CodePen.

Nguồn

Thiết Kế Profile Card Image CSS

Profile Card Image CSS

Kết quả bạn xem bên dưới nhé!

See the Pen #0056 - Profile with image, caption and icons by LittleSnippets.net (@littlesnippets) on CodePen.

Nguồn

Thiết Kế Card Đẹp Cho Website

Card Đẹp Cho Website

Kết quả bạn xem bên dưới nhé!

See the Pen #1218 - Profile Card by LittleSnippets.net (@littlesnippets) on CodePen.

Nguồn

Thiết Kế Card Với Social Icon

Card Với Social Icon

Kết quả bạn xem bên dưới nhé!

See the Pen #1568 - Profile Card by LittleSnippets.net (@littlesnippets) on CodePen.

Nguồn

Cách Tạo Hover Card Background

Hover Card Background

Kết quả bạn xem bên dưới nhé!

See the Pen #1471 - Profile Card by LittleSnippets.net (@littlesnippets) on CodePen.

Nguồn

Thiết Kế HTML, CSS Card Layout

HTML, CSS Card Layout

Kết quả bạn xem bên dưới nhé!

See the Pen #1142 - Profile card with image by LittleSnippets.net (@littlesnippets) on CodePen.

Nguồn

Hiệu Ứng Card Hover CSS3

Card Hover CSS3

Kết quả bạn xem bên dưới nhé!

See the Pen Our by RahulDhiman (@rahuldhiman) on CodePen.

Nguồn

Thiết Kế Slider Card CSS Javascript

Slider Card CSS Javascript

Kết quả bạn xem bên dưới nhé!

See the Pen Daily UI #006 - Profile by Rafaela Lucas (@rafaelavlucas) on CodePen.

Nguồn

Thiết Kế Gallery Card Javascript

Gallery Card Javascript

Kết quả bạn xem bên dưới nhé!

See the Pen 🖼️ Gliding Gallery | Simple Image Slider Transitions | @keyframers 1.15.0 by @keyframers (@keyframers) on CodePen.

Nguồn

Cách Tạo Simple Team Card

Simple Team Card

Kết quả bạn xem bên dưới nhé!

See the Pen Our-team showcase by Aashima (@Aashima) on CodePen.

Nguồn

Thiết Kế Team Card UI

Team Card UI

Kết quả bạn xem bên dưới nhé!

See the Pen meet our team2 by shamim khan (@shamim539) on CodePen.

Nguồn

Cách Tạo Team Card Transparent Background

Team Card Transparent Background

Kết quả bạn xem bên dưới nhé!

See the Pen #0067 - Profile image with caption and icons by LittleSnippets.net (@littlesnippets) on CodePen.

Nguồn

Thiết Kế Javascript Profile Card

Javascript Profile Card

Kết quả bạn xem bên dưới nhé!

See the Pen #0061 - Profile card with image, caption and icons by LittleSnippets.net (@littlesnippets) on CodePen.

Nguồn

Thiết Kế Hover Profile Card Với Social Icon

Hover Profile Card Với Social Icon

Kết quả bạn xem bên dưới nhé!

See the Pen #1039 - Profile icons and caption on hover by LittleSnippets.net (@littlesnippets) on CodePen.

Nguồn

Thiết Kế Hover Animation Profile Card

Hover Animation Profile Card

Kết quả bạn xem bên dưới nhé!

See the Pen #0042 - Profile card by LittleSnippets.net (@littlesnippets) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những team card hữu ích dành cho 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ẻ!