Create timeline with pure CSS

Tram Ho

Timeline has become a popular feature in many web designs and users find them very attractive. However, implementing this timeline is not easy as a customer is always asking for something unique for their website.

But you don’t have to start everything off if you already have a foundation. So in this article, I’ll walk you through the steps to create a customizable horizontal timeline using pure CSS.

Step 1: Create the basic structure

I will start everything off by creating the basic structure of the timeline. First, I will design a line in the middle and then arrange Date and Event inside the container boxes.

Then, I will combine multiple container boxes to form the event stream. You will be able to create the basic structure shown in the diagram using the code below.

Step 2: Adjust the Height and Width

Now, I will create a wrapper for the timeline to fix its height and width. According to the example below, the timeline wrapper is 300px high and it will take up the full width of the screen.

By margin: automatically the timeline will be horizontally centered.

Tip: Make sure set position: relative parent and position: absolute elements to child elements so that the children can be properly arranged relative to their parent.

Step 3: Draw the middle line

In the third step, I will add styles to the middle line. middle-line will take up the entire width of the timeline-wrapper and it will be 5 px tall. It is positioned exactly in the middle of the timeline-wrapper by setting top: 50% and transform: translateY (-50%).

Tip: To top: 50% is not enough to position the middle-line exactly in the middle. Since it is 5px tall, the middle-line will be skewed below 5px: v. So translating -50% along the Y axis is essential to position the middle-line to the correct center.

Step 4: Locate the date

Now, locate the dates in the timeline! First, I will split the timeline into sections.

I’ve set the width of the boxes to 17% so I can divide the timeline into six parts – in addition, the float: left is for arranging elements horizontally.

Tip: The box class should be set position: relative , as it will be the parent element for date and box-content classes.

The class date is placed in the middle of the timeline using top: 50% and transform: translateY(-50%) . border-radius is set to 100% to create a circle around the date. The date is placed inside the p tag with text centered.

almost now

Step 5: Style the event boxes

Next, I’ll style the box-content with a width of 180px and the background color set to #00b0bd . border-radius will be set to 5px to get rounded corners.

box-content is set at -77px from the left side of the box to correctly align with the date. The margin is set to 0 and the font color to white for the paragraphs inside the box-content;

I think it would be better to move the boxes to the sides of the middle line. So I moved the box-content of the box-bottom down 65% from the top part of the box element.

Now I will add a triangle on the bottom and top of the box-content using ::before . left: 50% and transform: translateX(-50%) will align the content to the center of the box-content .

You may not have seen any changes in the event boxes. But we are almost there! I color the relevant outline and place the ::before selector 20px away from the top or bottom of the box-content depending on its position.

Bingo! We designed a horizontal timeline from scratch using pure CSS.

In brief

This article is a comprehensive and hands-on guide on how to develop timeline using pure CSS. I took a horizontal approach because you may not find them much on the web.

In addition to the steps above, we can bring a lot more to the timeline, such as horizontal scrolling, by adding a bit of JavaScript. You can also try to make it responsive, but I wouldn’t recommend doing so as it will break the timeline.

I believe you will find it with the help of this tutorial. See you in another good article!

Share the news now

Source : Viblo