Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>
Idioma: En

3 Steps to Create a Simple Pure CSS Timeline

INTRODUCTION
SIMPLE DIY TIMELINE

Welcome to a tutorial on how to create a simple pure CSS Timeline. Yes, there are many CSS timeline plugins on the Internet, but nothing beats having the knowledge to build one yourself, and the power to style it as you please. So here it is, this step-by-step guide will walk you through how to create a vertical timeline with just pure CSS – Read on! 

I have included a zip file with all the source code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

Related Articles

CONFESSION
AN HONEST DISCLOSURE

Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!


 

NAVIGATION
TABLE OF CONTENTS

Section A
Vertical Timeline

Section B
Alternate Vertical Timeline

Extra
Download

Closing
What’s Next?

 

 

SECTION A
VERTICAL TIMELINE

Let us start with creating a simple and classic vertical timeline – These are actually surprisingly easy to build, and fully “compliant” with responsive designs.

STEP 1) THE VERTICAL LINE

HTML

1-vertical-timeline.html


  
    
      Pure CSS Vertical Timeline Demo
    
Vertical Timeline Demo

    

      

        

          11 Mar 2237 12:34
          
Evil Cates Invaded Planet Doge.

There is nothing “special” when it comes to creating a vertical timeline, just start by creating a

container to put the events in.

CSS

1-vertical-timeline.css
/* [CONTAINER] */
.vtl {
  /* Relative is necessary to properly position the child elements within */
  position: relative;
  /* More space for the vertical line to the left */
  padding: 10px 10px 10px 50px;
  /* Width restriction if you want */
  max-width: 320px;
}

/* [VERTICAL LINE] */
.vtl::before {
  content: '';
  width: 5px;
  background-color: #DE421A;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
}

/* [DOES NOT MATTER] */
html, body {
  font-family: arial, sans-serif;
}

The CSS part is not too complicated either.

  • We just give a padding to the container and leave a little bit more space to the left for the vertical line.
  • Then we create the vertical line using the .vtl::before selector, flushing it towards the left.

RESULT

11 Mar 2237 12:34
Evil Cates invaded planet Doge.

STEP 2) EVENTS STYLING

HTML

2-vertical-timeline.html


  
    
      Pure CSS Vertical Timeline Demo
    
Vertical Timeline Demo

    

      

        

          11 Mar 2237 12:34
          

            Evil Cates invaded planet Doge.

Next, we give the date and text a CSS class, make it look nicer.

CSS

2-vertical-timeline.css
/* [EVENT WRAPPER] */
div.ewrap {
  padding: 10px 0;
  position: relative;
  width: 100%;
}

/* [EVENT ITSELF] */
div.event {
  padding: 20px 30px;
  background-color: #caf2f2;
  position: relative;
  border-radius: 6px;
}

/* [THE DATE & TEXT] */
strong.date {
  font-size: 1.1em;
  font-weight: bold;
  color: #333;
}
p.text {
  margin: 0;
}

These should be pretty straightforward, we are just creating a “bubble” around each event and adding some cosmetics on the text.

RESULT

11 Mar 2237 12:34
Evil Cates invaded planet Doge.

STEP 3) MORE COSMETICS

HTML

3-vertical-timeline.html


  
    
      Pure CSS Vertical Timeline Demo
    
Vertical Timeline Demo

    

      

        

          11 Mar 2237 12:34
          

            Evil Cates invaded planet Doge.
          

        

      

      

        

          12 Mar 2237 14:23
          

            Cates ate Doge food.
          

        

      

      

        

          13 Mar 2237 20:12
          

            Cates took over the Doge beds.
          

        

      

      

        

          14 Mar 2237 08:11
          

            Hoomans to the rescue.
          

        

      

      

        

          15 Mar 2237 14:27
          

            Evil cates gone. Victory for good boys and girls.

No changes here, just added some more events to make this example look more complete.

CSS

3-vertical-timeline.css
/* [ADD SPEECH BUBBLE TRIANGLE] */
div.ewrap::before {
  content: '';
  border: 10px solid transparent;
  border-right-color: #caf2f2;
  border-left: 0;
  position: absolute;
  top: 20%;
  left: -10px;
}

/* [ADD CIRCLE ON VERTICAL LINE] */
div.ewrap::after {
  content: '';
  background: #fff;
  border: 4px solid #DE421A;
  width: 16px;
  height: 16px;
  border-radius: 20px;
  position: absolute;
  top: 20%;
  left: -44px;
}

To “complete” the timeline looks and feel:

  • We use the ::before selector to create a “triangle”, to make the events look more like legit speech bubbles.
  • We use the ::after selector to create circles/time points on the vertical line.

RESULT

11 Mar 2237 12:34
Evil Cates invaded planet Doge.
12 Mar 2237 14:23
Cates ate Doge food.
13 Mar 2237 20:12
Cates took over the Doge beds.
14 Mar 2237 08:11
Hoomans to the rescue.
15 Mar 2237 14:27
Evil cates gone. Victory for good boys and girls.

SECTION B
ALTERNATE VERTICAL TIMELINE

Now that you know how to create a simple basic timeline, here is an alternate version of it, with the vertical line in the center.

THE HTML

alt-vertical-timeline.html


  
    
      Alternate Vertical Timeline Demo
    
Alternate Vertical Timeline Demo

    

      

        

          11 Mar 2237 12:34
          

            Evil Cates invaded planet Doge.
          

        

      

      

        

          12 Mar 2237 14:23
          

            Cates ate Doge food.
          

        

      

      

        

          13 Mar 2237 20:12
          

            Cates took over the Doge beds.
          

        

      

      

        

          14 Mar 2237 08:11
          

            Hoomans to the rescue.
          

        

      

      

        

          15 Mar 2237 14:27
          

            Evil cates gone. Victory for good boys and girls.

Yep, the HTML in this alternate version is the same as previously – The difference is in the CSS.

THE CSS

alt-vertical-timeline.css
/* [CONTAINER] */
/* More accurate sizing */
.avtl, div.ewrap, div.event {
  box-sizing: border-box;
}
.avtl {
  position: relative;
  /* Width restriction if you want */
  max-width: 640px;
  margin: 0 auto;
}

/* This will draw the vertical line */
.avtl::before {
  content: '';
  width: 5px;
  background-color: #DE421A;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
}

/* [EVENT WRAPPER] */
div.ewrap {
  padding: 10px 40px;
  position: relative;
  width: 50%;
  left: 0; /* default to left */
}
div.right {
  left: 50%;
}

/* [EVENT ITSELF] */
div.event {
  padding: 20px 30px;
  background-color: #caf2f2;
  position: relative;
  border-radius: 6px;
}

/* [THE DATE & TEST] */
strong.date {
  font-size: 1.1em;
  font-weight: bold;
  color: #333;
}
p.text {
  margin: 0;
}

/* [ADD SPEECH BUBBLE TRIANGLE] */
div.ewrap::before {
  content: '';
  border: 10px solid transparent;
  border-left-color: #caf2f2;
  border-right: 0;
  position: absolute;
  right: 30px;
  top: 20%;
}
div.ewrap.right::before {
  content: '';
  border: 10px solid transparent;
  border-right-color: #caf2f2;
  border-left: 0;
  position: absolute;
  right: auto;
  left: 30px;
  top: 20%;
}

/* [ADD CIRCLE ON VERTICAL LINE] */
div.ewrap::after {
  content: '';
  background: #fff;
  border: 4px solid #DE421A;
  width: 16px;
  height: 16px;
  border-radius: 20px;
  position: absolute;
  top: 20%;
  right: -14px;
}
div.ewrap.right::after {
  content: '';
  background: #fff;
  border: 4px solid #DE421A;
  width: 16px;
  height: 16px;
  border-radius: 20px;
  position: absolute;
  top: 20%;
  right: auto;
  left: -10px;
}

/* [DOES NOT MATTER] */
html, body {
  font-family: arial, sans-serif;
}

Yikes. This looks like a whole handful of brain damage trouble, but it is just a slightly modified version of the earlier one:

  • The verticle line is now set to the center of the container with a left: 50%.
  • All the event wrappers div.ewrap are now set to width: 50%, so that they can either be on the left, or right side of the timeline.
  • By default, the event wrappers will be on the left side.
  • But by adding a .right and left: 50% to the event wrappers will move it to the right side instead. 
  •  The rest are pretty much just positioning magic for the speech bubble and timeline circle.

THE RESULT

11 Mar 2237 12:34
Evil Cates invaded planet Doge.
12 Mar 2237 14:23
Cates ate Doge food.
13 Mar 2237 20:12
Cates took over the Doge beds.
14 Mar 2237 08:11
Hoomans to the rescue.
15 Mar 2237 14:27
Evil cates gone. Victory for good boys and girls.

EXTRA
DOWNLOAD & MORE

That’s all for the code, and here is the download link as promised.

SOURCE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
  

CLOSING
WHAT’S NEXT?

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you in your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

The post 3 Steps to Create a Simple Pure CSS Timeline appeared first on Code Boxx.



This post first appeared on Xxxxxxxxx, please read the originial post: here

Share the post

3 Steps to Create a Simple Pure CSS Timeline

×

Subscribe to Xxxxxxxxx

Get updates delivered right to your inbox!

Thank you for your subscription

×