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

Cách Tạo Tab UI CSS


Ngày 12 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 component tab UI bằng HTML CSS cho thiết kế và phát triển website nha.

Simple CSS Tabs

HTML

Bước đầu tiên chúng ta sẽ đi vào tạo cấu trúc HTML và thêm các thư viện CDN cần thiết như fontawesome, line.css cho css tab thông qua đoạn code sau đây nha:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pure CSS Tabs - 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">
    <header>Cách Tạo Component Tab Bằng CSS</header>
    <input type="radio" name="slider" checked id="home">
    <input type="radio" name="slider" id="blog">
    <input type="radio" name="slider" id="services">
    <input type="radio" name="slider" id="about">
    <nav>
      <label for="home" class="home"><i class="fas fa-home"></i>Home</label>
      <label for="blog" class="blog"><i class="fas fa-blog"></i>Blog</label>
            <label for="services" class="services"><i class="far fa-envelope"></i>Services</label>
      <label for="about" class="about"><i class="far fa-user"></i>About me</label>
      <div class="slider"></div>
    </nav>
    <section>
      <div class="content content-1">
        <div class="title">Nội Dung Tab Trang Chủ</div>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div class="content content-2">
        <div class="title">Nội Dung Tab Blog</div>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div class="content content-3">
        <div class="title">Nội Dung Tab Dịch Vụ</div>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div class="content content-4">
        <div class="title">Nội Dung Tab About Me</div>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </section>
  </div>
</body>
</html>

CSS

Tiếp theo chúng ta sẽ sử dụng các thuộc tính CSS cơ bản để xây dựng giao diện cho chức năng này bằng đoạn mã dưới đây 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{
  padding: 0 20px;
  background: #1b2a49;
}
::selection{
  background: rgba(23,162,184,0.3);
}
.container{
  max-width: 700px;
  width: 100%;
  margin: 200px auto;
  padding: 25px 30px 30px 30px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  color: #1b2a49;
}
.container header{
  font-size: 30px;
  font-weight: 600;
  padding-bottom: 20px;
}
.container nav{
  position: relative;
  width: 80%;
  height: 50px;
  display: flex;
  align-items: center;
}
.container nav label{
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  color: #000;
  font-size: 17px;
  border-radius: 5px;
  margin: 0 5px;
  transition: all 0.3s ease;
}
.container nav label:hover{
  background: #1b2a49;
  color:#bada55;
}
#home:checked ~ nav label.home,
#blog:checked ~ nav label.blog,
#services:checked ~ nav label.services,
  #about:checked ~ nav label.about{
  color: #bada55;
}
nav label i{
  padding-right: 7px;
}
nav .slider{
  position: absolute;
  height: 100%;
  width: 25%;
  left: 0;
  bottom: 0;
  z-index: 0;
  border-radius: 5px;
  background: #1b2a49;
  transition: all 0.3s ease;
}
input[type="radio"]{
  display: none;
}
#blog:checked ~ nav .slider{
  left: 25%;
}
#services:checked ~ nav .slider{
  left: 50%;
}
#about:checked ~ nav .slider{
  left: 75%;
}
section .content{
  display: none;
  background: #fff;
}
#home:checked ~ section .content-1,
#blog:checked ~ section .content-2,
#services:checked ~ section .content-3,
#about:checked ~ section .content-4{
  display: block;
}
section .content .title{
  font-size: 21px;
  font-weight: 500;
  margin: 30px 0 10px 0;
}
section .content p{
text-align: justify;
}

Và kết quả bạn xem video dưới đây nha.

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

See the Pen cach tao tab html css by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm về các tab ui khác 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 được giao diện tab ui 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ẻ!

Tìm Kiếm Bài Viết

Ads Digital Ocean

Nhận Ngay $100 sử dụng dịch vụ khi đăng ký tài khoản trên DigitalOcean.

Ads azdigi

Sử dụng dịch vụ hosting của Azdigi chỉ với 50.000 đồng.

Ads HostGator

Nhận Ngay Tên Miền Và Chứng Chỉ SSL Miễn Phí Khi Sử Dụng Hosting Của HostGator.

Ads Name Cheap

Đăng Ký Tên Miền Chỉ Với $0.99/năm cùng với Name Cheap.