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

Cách Tạo Vertical Timeline Bằng HTML CSS


Ngày 15 Tháng 10 Năm 2020

Cách Tạo Vertical Timeline Bằng HTML CSS

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo vertical timeline(dòng thời gian dọc) bằng HTML, CSS nhé!

Tạo Cấu Trúc Phần Tử HTML Cho Vertical Timeline

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">
    <title>Tạo Vertical Timeline</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Thêm Các Phần Tử HTML và CSS Cho Timeline

Bây giờ chúng ta sẽ đi vào thêm các phần tử HTML cần thiết cho timeline thông qua đoạn mã sau nhé:

HTML

<div class="timeline">
   <ul>
       <!--Nội dung cho timeline thứ 1-->
       <li>
           <div class="noi_dung">
               <h3>Thông Tin Timeline 1</h3>
               <p>Lorem ipsum dolor sit amet consectetur dipisicing elit. Animi, illo ipsum accusamus mollitiaet,ipsam el eaque at quisquam magnam incidunt amet consectetur praesentium aperiam,reprehenderit quaerat iste nam porro.</p>
           </div>
           <div class="thoi_gian">
               <h4>
                   Tháng 1 Năm 2020
               </h4>
           </div>
       </li>
       <!-- Kết thúc nội dung cho timeline thứ 1-->

       <!--Nội dung cho timeline  thứ 2-->
       <li>
       <div class="noi_dung">
           <h3>Thông Tin Timeline 2</h3>
           <p>Lorem ipsum dolor sit amet consectetur dipisicing elit. Animi, illo ipsum accusamus mollitiaet,ipsam el eaque at quisquam magnam incidunt amet consectetur praesentium eriam,reprehenderit quaerat iste nam porro.</p>
       </div>
       <div class="thoi_gian">
           <h4>
               Tháng 2 Năm 2020
           </h4>
       </div>
       </li>
       <!-- Kết thúc nội dung cho timeline thứ 2-->

       <!--Nội dung cho timeline thứ 3-->
       <li>
       <div class="noi_dung">...</div>
       </li>
       <!-- Kết thúc nội dung cho timeline thứ 3-->

       <!--Nội dung cho timeline thứ 4-->
       <li>
       <div class="noi_dung">...</div>
       </li>
       <!-- Kết thúc nội dung cho timeline thứ 4-->

      <!-- Nội dung cho timeline thứ 5-->
       <li>
       <div class="noi_dung">...</div>
       </li>
       <!-- Kết thúc nội dung cho timeline thứ 5-->

       <div style="clear:both"></div>
   </ul>
 </div>

Ở đoạn mã trên mọi thành phần trong thẻ div có class noi_dung đều giống nhau nên mình sẽ ghi tắt bằng dấu ... Sau khi đã tạo xong bộ khung cho vertical timline thì bước tiếp theo bạn và mình sẽ sử dụng một số thuộc tính CSS để xác định vị trí, font chữ... cho nó thông qua đoạn mã bên dưới nhé:

CSS

body{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}
.timeline{
    position: relative;
    margin: 50px auto;
    padding: 40px 0;
    width: 1000px;
    box-sizing: border-box;
}
.timeline ul {
    margin: 0;
    padding: 0;
}
.timeline ul li{
    line-height: normal;
    position: relative;
    width: 50%;
    padding: 20px 40px;
    box-sizing: border-box;
    list-style: none;
}

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

Vertical Timeline 1

Thiết Kế Timeline Cơ Bản

Thông thường khi thiết kế một timeline thì sẽ nó sẽ có một đường thẳng để hiển thị mốc thời gian với từng nội dung của sự kiện tương ứng. Nội dung của từng thời gian cũng được sắp xếp xen kẽ để người dùng có thể dễ dàng đọc và nắm rõ hơn.

Trong phần này chúng ta sẽ đi vào thiết kế hai yêu cầu cơ bản phía trên của timeline bằng CSS nhé!

CSS

/*Tạo đường thẳng cho mốc thời gian*/
.timeline:before{
    content: '';
    position: absolute;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #c5c5c5;
}
/*Sắp xếp phần tử lẻ nằm bên trái*/
.timeline ul li:nth-child(odd){
    float: left;
    text-align: right;
    clear: both;
}
/*Sắp xếp phần tử chẳn nằm bên phải*/
.timeline ul li:nth-child(even){
    float: right;
    text-align: left;
    clear: both;
}
.noi_dung{
    padding-bottom: 20px;
}

Kết quả của đoạn mã trên bạn xem ở bên dưới nha:

Vertical Timeline 2

Thiết Kế Mốc Thời Gian Timeline

Trong phần này chúng ta sẽ đi vào xây dựng biểu tượng cho từng mốc thời gian trên đường ngăn cách giữa các phần tử thông qua đoạn mã sau nhé:

CSS

.timeline ul li:nth-child(odd):before{
    content: '';
    position: absolute;
    top: 24px;
    right: -6px;
    width: 10px;
    height: 10px;
    background: rgba(97, 123, 227, 1);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(97, 123, 227, 0.2);
}
.timeline ul li:nth-child(even):before{
    content: '';
    position: absolute;
    top: 24px;
    left: -4px;
    width: 10px;
    height: 10px;
    background: rgba(97, 123, 227, 1);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(97, 123, 227, 0.2);
}

Kết quả của đoạn mã trên bạn xem ở bên dưới nha:

Vertical Timeline 3

Trang Trí Hiển Thị Thời Gian Trong Timeline

Phần cuối cùng chúng ta sẽ đi vào thiết kế cách hiển thị thời gian trong timeline thông qua đoạn mã sau nhé:

CSS

.timeline ul li h3{
    margin: 0;
    padding: 0;
    font-weight: 500;
    color: rgba(97, 123, 227, 1);
}
.timeline ul li p{
    margin: 10px 0 0;
    padding: 0;
}
.timeline ul li .thoi_gian h4{
    margin: 0;
    padding: 0;
    font-size: 14px;
}
.timeline ul li:nth-child(odd) .thoi_gian{
    position: absolute;
    top: 12px;
    right: -165px;
    margin: 0;
    padding: 8px 16px;
    background: rgba(97, 123, 227, 1);
    color: #fff;
    border-radius: 18px;
    box-shadow: 0 0 0 3px rgba(97, 123, 227, 0.4);
}
.timeline ul li:nth-child(even) .thoi_gian{
    position: absolute;
    top: 12px;
    left: -165px;
    margin: 0;
    padding: 8px 16px;
    background: rgba(97, 123, 227, 1);
    color: #fff;
    border-radius: 18px;
    box-shadow: 0 0 0 3px rgba(97, 123, 227, 0.4);
}

Và kết quả cuối cùng bạn xem hình ảnh dưới nha:

Vertical Timeline Final

Và đây là dự án trên Codepen nhé: (Bạn phải chuyển sang chế độ screen 0.5x, 0.25x thì mới thấy rõ được hiệu ứng):

See the Pen Tạo Vertical timline by haycuoilennao19 (@haycuoilennao19) 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 kiến thức để tạo vertical timline bằng HTML, CSS 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ẻ!

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.