Các mốc thời gian hoặc mốc thời gian là một trong những yếu tố bổ sung mà chúng ta có thể nhúng vào một trang web để hiển thị tiến trình hoặc sự phát triển trong năm của một công ty hoặc công ty. Một biểu thức đồ họa trực quan tốt biết cách bố cục nó một cách trang nhã với kiểu chữ và các yếu tố hình ảnh, có thể hiển thị các bước thực hiện của một dịch vụ hoặc sản phẩm theo thời gian.
29 mốc thời gian mà bạn sẽ tìm thấy dưới đây là từ các dòng thời gian dọc cũng như các đường ngang. Bạn sẽ tìm thấy cái tốt nhất phù hợp với nhu cầu của mình để định vị nó trên một trang của trang web mà bạn đang phát triển cho khách hàng hoặc cho chính bạn. Chúng tôi sẽ đưa ra một bộ sưu tập các mốc thời gian rất thú vị và rất đẹp mắt.
Dòng thời gian bằng cách cuộn
Dòng thời gian bằng mã HTML, CSS và JavaScript để định vị chính nó một cách duyên dáng tối giản tốt trong đó nhấn mạnh màu đỏ cho danh sách năm ở bên trái và màu đen cho phông chữ và H2s. Điều tốt nhất về dòng thời gian này là khi bạn cuộn qua trang, thay đổi năm sẽ tự động được thực hiện. Kết thúc tuyệt vời, thiết kế và kết quả.
Dòng thời gian trong CSS
Dòng thời gian này sử dụng mã CSS để có thể được định cấu hình đúng trong một số thuộc tính của nó. Nó không có cuộn giống như phần trước, nhưng nó được đặc trưng bởi một loạt các hộp và một màu xanh lam để tạo cho nó một nét rất thanh lịch khác và thêm vào danh sách các mốc thời gian của ấn phẩm này.
Thanh trượt dòng thời gian đáp ứng
Dòng thời gian này được tạo bằng thư viện Swiper JS để bao gồm mã HTML, CSS và JavaScript. Nó không có tính năng cuộn khi chúng ta duyệt qua trang web, nhưng nó có đặt năm ở phía bên phải và một nút mà chúng ta có thể chuyển sang nút tiếp theo, ngoài việc có thể sử dụng con trỏ chuột để chuyển đến một năm cụ thể. Hoạt ảnh tuyệt vời trong mỗi chuyển đổi.
Dòng thời gian nâng cao
Dòng thời gian này nổi bật với việc sử dụng HTML, CSS và JavaScript, ngoại trừ đi vào màu đơn sắc, chính xác trong tông màu đỏ. Nó cũng được đặc trưng bởi việc sử dụng một nút cho phép bạn tiến hoặc lùi trong dòng thời gian được đánh dấu bởi mã kết quả tuyệt vời này là khá tối giản.
Dòng thời gian với tiêu đề cố định và Flexbox
Mã HTML và CSS cho một tiêu đề cố định nó sẽ vẫn cố định tại thời điểm chúng tôi thực hiện cuộn trong trang. Sự tinh tế tuyệt vời trở thành mốc thời gian rất được quan tâm đối với bất kỳ nhà phát triển hiện tại nào muốn nổi bật theo các tiêu chuẩn thiết kế web hiện tại.
Tiến trình dự án
Dòng thời gian này sử dụng CSS và HTML để trình bày một dòng thời gian quan trọng để sử dụng khoảng thời gian cụ thể đó cho một dự án. Khi chúng tôi cuộn nó qua các ngày trong tuần, vì vậy, thật hoàn hảo để triển khai nó cho các công cụ cộng tác do chính công ty sản xuất.
Lịch Trình Sự Kiện
Mốc thời gian trong HTML, CSS và JavaScript nổi bật so với phần còn lại cho chủ đề hình ảnh. Và đó là khi chúng ta cuộn qua dòng thời gian dọc, mỗi khi chúng ta tìm thấy một bức ảnh mới trong dòng thời gian, nó sẽ trở thành hình nền của trang web mà chúng ta đã đặt mã này.
Hyperloop
Hyperloopu là một dòng thời gian nổi bật hơn là cho thiết kế được sử dụng và chỉ được lập trình trong HTML và CSS. Nó được đặc trưng bởi việc sử dụng các kích thước khác nhau trong phông chữ của văn bản với một đường thẳng đứng và một loạt các ô đánh dấu từng thời điểm quan trọng của dòng thời gian.
Dòng thời gian dọc
Một dòng thời gian khoảng tạo khoảng cách với phần còn lại bằng cách chạm vào thị giác. Nó có một nền gradient rất hiện tại trong thiết kế và một loạt các hộp đánh dấu mỗi khoảng đó. Được lập trình bằng CSS và HTML.
Dòng thời gian trong Flexbox
Một trong những mốc thời gian hoàn thành tốt nhất và dựa trên thẻ để bao gồm tất cả thông tin chúng tôi cần cho khoảng thời gian đó. Cũng được phát triển bằng HTML và CSS, cần phải tính đến việc tất cả các thẻ phải có cùng chiều cao và chiều rộng để tính không gian cho màn hình lớn hơn.
Tiến trình trong DIV
Dòng thời gian tối giản trong thiết kế và điều đó đã chỉ phát triển trong HTML và CSS, vì vậy việc triển khai nó có thể rất nhanh. Nó hoàn toàn phù hợp để thể hiện dòng thời gian trong một phương tiện thông tin do lớp hoàn thiện đơn sắc của nó.
Dòng thời gian trong CSS và HTML
Bạn có thể đặt Hình ảnh kích thước 400 × 300 trong dòng thời gian này được phân biệt bởi màu xanh lục của các đường và văn bản của ngày tháng. Nó không có hình ảnh động và được đặc trưng bởi thiết kế đơn giản ở mọi cấp độ.
Dòng thời gian nhận xét và phản hồi
Một dòng thời gian rất khác với những dòng thời gian khác cho phép đặt thẻ có ảnh của người dùng, hoặc ít nhất đó là ý định lúc đầu. Với phong cách trực quan tuyệt vời, các thẻ sử dụng đổ bóng cho một dòng thời gian khá phẳng mà không có hoạt ảnh.
Dòng thời gian buổi sáng trong HTML và CSS
Một dòng thời gian hoàn hảo để đáp ứng nó có đặc điểm là HTML, CSS và đưa ra một dòng thời gian khá đơn giản nhưng rất cơ động.
Giao diện người dùng dòng thời gian
Mã này trong HTML và CSS hoạt động hoàn hảo cho trình bày ngày làm việc của một buổi tập luyện. Nó đáp ứng với một hình ảnh tiêu đề và một loạt các nút hiển thị nó một cách rất rõ ràng và sạch sẽ ở khía cạnh trực quan.
Dòng thời gian chỉ trong CSS
Dòng thời gian này có đặc điểm là nằm trong CSS và loạt màu được lựa chọn tốt: đỏ và xanh lá cây. Màu xanh lá cây để bao phủ toàn bộ trang, màu trắng cho văn bản và đường phân chia, và màu đỏ để phân biệt khoảng thời gian mà chúng ta đang ở. Chúng ta có thể nhấp vào mỗi khoảng để đặt nó với một hộp bao quanh nó và làm nổi bật nó.
Dòng thời gian đáp ứng V3
Dòng thời gian ngang đầu tiên trong danh sách bằng HTML, CSS và JavaScript. Trực quan nổi bật cho sử dụng màu đen và xám để đặt một đường ngang với một loạt các điểm. Mỗi khoảng được đánh dấu với trọng số lớn hơn trong nguồn và trong nội dung văn bản.
Dòng thời gian được tô màu
Một trong những mốc thời gian ngang chất lượng hình ảnh cao nhất trong danh sách. Dòng thời gian tương tác tốt với các hoạt ảnh rất tinh tế và được trình bày tốt để mang lại trải nghiệm người dùng tuyệt vời mỗi khi nhấn một trong các khoảng thời gian. Nó được làm bằng HTML CSS / Sass và JavaScript / TypeScript (jquery.js).
Dòng thời gian lịch sử phản hồi
Một mốc thời gian hoàn hảo cho hiển thị các sự kiện khác nhau trong hình ảnh của một khe thời gian trong lịch sử. Nó nằm ngang và đáp ứng vì đã được phát triển trong HTML, CSS và JavaScript.
Dòng thời gian của nhóm
Dòng thời gian này nổi bật cho một quá trình chuyển đổi tốt được thực hiện với hoạt ảnh ngang. Có màu sắc tuyệt vời và thiết kế tinh tế để làm nổi bật từng khoảng thời gian. Nó bằng HTML, CSS và JavaScript để trình bày một loạt các thẻ được phủ trên một hình nền đại diện.
Dòng thời gian CSS và HTML ngang
Do anh ấy làm Envato Tuts + đã biết, chúng tôi được giới thiệu với một dòng thời gian ngang với một loạt các thẻ cơ bản và rõ ràng trong thiết kế. Các màu phẳng và một đường ngang với một loạt các chấm màu đỏ đan xen nhau trong mỗi khoảng.
Dòng thời gian CSS, HTML và slick.js
Tông màu pastel trong thiết kế cho dòng thời gian nổi bật về cách trình bày của từng hình ảnh hiển thị từng khoảng thời gian. Chính sự chuyển đổi giữa từng hình ảnh và khoảng thời gian đã làm cho dòng thời gian này trở nên nổi bật.
Trình tự thời gian V1
Dòng thời gian nổi bật với các nút trên mỗi đường dọc của mỗi khoảng thời gian để liên kết một hình nền toàn màn hình mỗi khi chúng ta nhấn vào một.
Dòng thời gian ngang HTML CSS
Bạn sẽ không thể nhấp vào bất kỳ đâu trên dòng thời gian được đánh dấu bằng dấu thiết kế tinh tế bởi sự lựa chọn thông minh của bảng màu và một loạt bánh mì sandwich cho từng mốc thời gian. Không có hình ảnh động, nhưng về mặt hình ảnh nó rất dễ chịu.
Dòng thời gian Codyhouse
Dòng thời gian này do Codyhouse trình bày là một màu duy nhất trong thiết kế và được phát triển bằng HTML, CSS và JavaScript. Nó trình bày một đường thẳng tối giản với một loạt các điểm là các khoảng thời gian được nhấp vào và gây ra hoạt ảnh ngang dưới nửa giây. Đơn giản, nhưng mạnh mẽ.
Dòng thời gian ngang
Một dòng thời gian khác được tạo bằng HTML, CSS và JavaScript. Đặc trưng bởi một màu duy nhất, có thiết kế trang nhã với màu xanh lá cây để đặt ren trên từng điểm thể hiện các khoảng thời gian. Mỗi khi chúng ta nhấn một phím, một hoạt ảnh bên rất mượt mà bắt đầu.
Dòng thời gian không tên
Dòng thời gian màu đen duy nhất từ danh sách dưới cùng. Sau đó, anh ấy sử dụng màu sắc khác nhau để phân biệt từng năm và văn bản đồng thời với giới hạn của nó. Nó có một hình ảnh động nổi bật để chuyển giữa mỗi văn bản.
Mốc thời gian
Dòng thời gian này đặt điểm nhấn trên màu xanh lá cây hoàn toàn tĩnh.
Một dòng thời gian ngang khác
Nó có thể đặt một hình ảnh gần toàn màn hình cho dòng thời gian nổi bật với việc sử dụng màu xanh lam và xám, cùng với một loạt các vòng tròn đại diện cho mỗi năm.
Đừng bỏ lỡ một loạt menu khác trong CSS và HTML.