Tóm Tắt
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
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é:
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:
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:
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:
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ẻ!
