Cách Tạo Neumorphic Card CSS

Cách Tạo Neumorphic Card CSS


Ngày 5 Tháng 11 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo neumorphic profile card bằng HTML CSS cho thiết kế và phát triển website nha.

Neumorphic Card CSS

HTML

Bước đầu tiên chúng ta sẽ đi vào tạo cấu trúc HTML cho profile card neumorphic cũng như thêm các thư viện CDN cần thiết như Font Awesome. Để hiểu rõ hơn bạn video dưới đây nha:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Cách Tạo Profile Card CSS - Niemvuilaptrinh</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="container">
    <div class="img-area">
      <div class="inner-area">
        <img src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/logo.png" alt="">
      </div>
    </div>
         <div class="name">Niềm Vui Lập Trình</div>
    <div class="about">Nơi Chia Sẻ Kiến Thức Lập Trình</div>
    <div class="social-icons">
      <a href="#" class="fb"><i class="fab fa-facebook-f"></i></a>
      <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
      <a href="#" class="insta"><i class="fab fa-instagram"></i></a>
      <a href="#" class="yt"><i class="fab fa-youtube"></i></a>     </div>
    <div class="buttons">
      <button>Đăng Ký</button>
      <button>Nhắn Tin</button>
    </div>
    <div class="social-share">
      <div class="row">
        <i class="far fa-heart"></i>
        <span>1.2k</span>
      </div>
      <div class="row">
        <i class="far fa-comment"></i>
        <span>2.4k</span>
      </div>
      <div class="row">
        <i class="fas fa-share"></i>
        <span>1.2k</span>
      </div>
    </div>
  </div>
</body>
</html>

CSS

Tiếp theo chúng ta sẽ sử dụng các thuộc tính CSS cơ bản để phát triển giao diện cho profile card này. Để hiểu rõ hơn bạn xem đoạn code sau nha:

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #ecf0f3;
}
.container,
.container .img-area,
.social-icons a,
.buttons button{
  background: #ecf0f3;
  box-shadow: -3px -3px 7px #ffffff,
               3px 3px 5px #ceced1;
}
.container{
  position: relative;
  width: 350px;
  padding: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.container .icon{
  font-size: 17px;
  color: #31344b;
  position: absolute;
  cursor: pointer;
  opacity: 0.7;
  top: 15px;
  height: 35px;
  width: 35px;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
  font-size: 16px;
}
.container .icon i{
  position: relative;
  z-index: 9;
}
.container .icon.arrow{
  left: 15px;
}
.container .icon.dots{
  right: 15px;
}
.container .img-area{
  height: 150px;
  width: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-area .inner-area{
  height: calc(100% - 25px);
  width: calc(100% - 25px);
  border-radius: 50%;
}
.inner-area img{
  height: 100%;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.container .name{
  font-size: 23px;
  font-weight: 500;
  color: #31344b;
  margin: 10px 0 5px 0;
}
.container .about{
  color: #44476a;
  font-weight: 400;
  font-size: 16px;
}
.container .social-icons{
  margin: 15px 0 25px 0;
}
.social-icons a{
  position: relative;
  height: 40px;
  width: 40px;
  margin: 0 5px;
  display: inline-flex;
  text-decoration: none;
  border-radius: 50%;
}
.social-icons a:hover::before,
.container .icon:hover::before,
.buttons button:hover:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  background: #ecf0f3;
  box-shadow: inset -3px -3px 7px #ffffff,
              inset 3px 3px 5px #ceced1;
}
.buttons button:hover:before{
  z-index: -1;
  border-radius: 5px;
}
.social-icons a i{
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
  height: 100%;
  line-height: 40px;
}
.social-icons a.fb i{
  color: #4267B2;
}
.social-icons a.twitter i{
  color: #1DA1F2;
}
.social-icons a.insta i{
  color: #E1306C;
}
.social-icons a.yt i{
  color: #ff0000;
}
.container .buttons{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.buttons button{
  position: relative;
  width: 100%;
  border: none;
  outline: none;
  padding: 12px 0;
  color: #31344b;
  font-size: 17px;
  font-weight: 400;
  border-radius: 5px;
  cursor: pointer;
  z-index: 4;
}
.buttons button:first-child{
  margin-right: 10px;
}
.buttons button:last-child{
  margin-left: 10px;
}
.container .social-share{
  display: flex;
  width: 100%;
  margin-top: 30px;
  padding: 0 5px;
  justify-content: space-between;
}
.social-share .row{
  color: #31344b;
  font-size: 17px;
  cursor: pointer;
  position: relative;
}
.social-share .row::before{
  position: absolute;
  content: "";
  height: 100%;
  width: 2px;
  background: #e0e6eb;   margin-left: -25px;
}
.row:first-child::before{
  background: none;
}
.social-share .row i.icon-2{
  position: absolute;
  left: 0;
  top: 50%;
  color: #31344b;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.row:nth-child(1):hover i.fa-heart,
.row:nth-child(2):hover i.fa-comment{
  pointer-events: auto;
}
.fa-heart {
  color:#FF1493;
}
.fa-comment {
  color:#1E90FF;
}

Bạn xem giao diện profile card ở hình ảnh bên dưới nha.

Profile card neumorphic

Còn dưới đây là dự án trên Codepen nha.

See the Pen cách tạo Profile card neumorphic by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm về phong cách thiết kế Neumorphism thì truy cập ở đây nha.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp cho bạn cách để tạo neumorphic card CSS 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ẻ!