Jump to content

HTML/CSS Timeline
   (0 reviews)

Arceus
  • A full CSS and HTML vertical timeline? You bet! This uses pseudo-selectors to create a vertical bar with points along that bar with whatever text you need in it, creating a quite fancy historical timeline for your fantasy sites. With a few other embellishments, you can make it super neat.

    Type: Look & Feel Software: Other 179,159

Today, we'll be coding this:

timeline.png

Or at least, making something very similar.

 

I created this a long time ago for my fantasy site's historical timeline. It is entirely CSS and HTML, and you may need to fiddle with the precise numbers, but for the most part, it should be pretty straightforward. So to get started, we want a container div. You can call this container div whatever you'd like, but mine calls it timeline_container. We want this to have a relative position, and you'll probably want to set a max-width and ensure it margins 0 auto so that it centres.

.timeline_container 
{
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

To create the timeline bar, we create a pseudo selector for .timeline_container::after - or whatever it is you called your timeline container. Set it to position absolute, a width, and then position absolute, top and bottom at 0, and left at 50%. You may need to fiddle with positioning a bit using margining.

.timeline_container::after
{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 6px;
    background-color: #808080;
}

By the way, #808080 is exactly 50% saturation grey, so you can usually see it okay on both light and dark themes.

 

Now, we have our bar. We need to create a box that we can use to show events on either side of this centre vertical bar. We're going to use basically the same box, and just add a second class to it that alters positioning, so that we have "containerclass positionclass" for classing. Let's call this container class .timeline_box. I gave mine 10px 40px padding, a 50% width, inherited background, and a relative positioning. We won't be creating the appearance styling for the boxes in this part, but in an inner content class in a minute.

.timeline_box
{
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

There is a pseudo-selector we need to use on timeline_box, this being ::after. This will create the dot on the timeline. We set this to position: absolute, 25px width and height, give it a background colour and, if desired, a border, z-index 1 and top and right positioning to get it where we want. Mine ended up top 15px and right -14px, but this didn't hold up recreating it elsewhere, so you will most likely need to mess with it.

.timeline_box::after
{
    content: '';
    position: absolute;
    top: 15px;
    right: -14px;
    width: 25px;
    height: 25px;
    background: #222;
    border: 4px solid;
    border-radius: 50%;
    z-index: 1;
}

You might notice here that I have a border but no colouring. This is because I added other classes to colour-code the dots by era and so I set the border-colour elsewhere, so if you're not going to be doing that, you may want to set the border colour here.

 

Next, we need to create the box positioning. We do this with two other classes, called .timeline_left and .timeline_right. These are very simple classes, all they have in the CSS for them is left: 0 and left: 50%. Now, it seems like you would create timeline_right with right: 0; but right: 0 is in a place we aren't expecting, and places the timeline box also on the left side.

 

With the .timeline_left and .timeline_right classes, we'll add ::before pseudo-selectors to create arrows. These will point at the dot on the timeline and make it look a little fancier. You can skip this if you don't feel the need for these.

.timeline_left::before
{
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    top: 22px;
    right: 30px;
    z-index: 1;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #343434;
}
.timeline_right::before
{
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    top: 22px;
    left: 30px;
    z-index: 1;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent #343434 transparent transparent;
}

Again, you will likely have to fiddle with the positioning.

 

Now, the last piece of the puzzle is to create the box itself. We'll call this internal box .timeline_content. Padding, a background colour, position relative, and a 6px border radius ought to do the trick.

.timeline_content
{
    padding: 10px 15px;
    background: #343434;
    position: relative;
    border-radius: 6px;
}

Remember that whatever you make the content box's background will have to be the same colour as on the non-transparent bordering of _left::before and _right::before. Here you'll likely find that you need to fiddle with the positioning finally, if you haven't already, as you find the results are a little out of alignment, but you should eventually have something like this.

timeline2.png

And there we go. That's all there is to it. c: You can add embellishments and colour code your timeline if you'd like, I colour-coded mine by era and added a pulsating CSS animation effect on the timeline markers, but it's up to you what you do from here! Have fun! (This was a terrible tutorial, I'm half awake, sorry. xD)


  • Fuck Yeah! 1
  • Love 2
  • Thank you 1
  • Cheers 1

Related Guides

  • Arceus

    HTML/CSS Transitions

    By Arceus, By Arceus, in Coding,

    By popular demand, and threat of kangaroos (I jest), a couple quick tutorial-guides on how to achieve neat-o CSS transition animation effects; there are two different effects here. The concept is essentially the same, but how they operate is a little different, so I decided to write out both. Yes, it's entirely CSS and HTML, I promise. We'll be using CSS transitions to create a cool letter spacing effect, where one line spreads out and vanishes, and is replaced by a new line that fades in and pulls together. We'll also make little corners that move in and out on hover, very neat sci-fi-like effect. This will not just give you the codes, it will walk you through creating them, and assumes you have a minimal understanding of basic CSS.


  • Kit the Human

    How to Read and identify HTML and CSS

    By Kit the Human, By Kit the Human, in Coding,

    This guide will teach you what makes up a HTML and CSS code, giving you the language to be able to identify each part of the code. Knowing the right language allows you to better communicate your message to other coders, thus increasing your ability to state what you're having trouble with. Or what you're looking for.

    Other




User Feedback

Create an account or sign in to leave a review

You need to be a member in order to leave a review

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

There are no reviews to display.


×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.