CSS Timeline style for your blog posts

CSS Timeline

Today we’d like to share some fresh blog timeline css styles with you. In this link you can view a demo of this little project.This is quite exciting since there are a variety of design details in use which allows for a great diversity of styles. There are lots of thin lines but also bold typography and vice versa. I tried to create a balanced, simple and very minimalistic design for a typical css timeline posts. You can view the project file for CSS Timeline using the links bellow:
Live Demo

The HTML markup for our CSS Timeline

<section class="timeline">
 <article class="timeline-box">Article Title and body</article>
 <article class="timeline-box">Article Title and body</article>
 <article class="timeline-box">Article Title and body</article>
 <article class="timeline-box">Article Title and body</article>
</section>

 

First things first, if you want you can download Foundation or Bootstrap since we will use some of its classes in our css timeline project. If you don’t want to use them you can target articles with :nth-child(odd) and :nth-child(even) to float them left and right and also set the width to around 47.6%. We need to set margin-left for every second article at 4.6% and we do that with the following code:

Stylesheet for our CSS Timeline

.timeline .timeline-box {
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.04);
	border: 1px solid #E5E5E5;
	border-radius: 4px;
	padding: 10px;
	width:47.6%;
	float:left;
	position: relative;
	z-index: 1;
	background: #FFF;
	height:400px;
}
.timeline-box:nth-child(even) {
margin-left:4.6%
}

 

Now let’s add the “middle line” for our css timeline with a simple CSS3 trick :after element ! We will use a background gradient. We set position to absolute and put him in the middle of our css timeline.

.timeline:after {
 background: #505050;
 background: -moz-linear-gradient(top, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(100%, #7db9e8));
 background: -webkit-linear-gradient(top, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%);
 background: -o-linear-gradient(top, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%);
 background: -ms-linear-gradient(top, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%);
 background: linear, to bottom, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%;
 content: "";
 display: block;
 height: 100%;
 left: 50%;
 margin-left: -2px;
 position: absolute;
 top: -60px;
 width: 3px;
 z-index: 0;
 filter: alpha(opacity=35);
 opacity: 0.35;
}

 

Also with :before and :after element of each article, we make a little arow (:after) and a “dot” (:before) to “anchor” them on our timeline. We have to change the position for every 2nd article arrow and dot – we do that with the same selector as previous: .timeline-box:nth-child(even):before.

.timeline .timeline-box:before {
 background: none repeat scroll 0 0 #08c;
 border-radius: 50%;
 box-shadow: 0 0 0 3px #FFF, 0 0 0 6px #08c;
 content: "";
 display: block;
 height: 7px;
 margin-right: -5px;
 position: absolute;
 right: -5.0%;
 top: 25px;
 width: 8px;
}

.timeline .timeline-box:nth-child(even):before {
 margin-left: -5px;
 left: -4.7%;
 top: 55px;
}

.timeline .timeline-box:after {
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 background: #FFF;
 border-right: 1px solid #E5E5E5;
 border-top: 1px solid #E5E5E5;
 content: "";
 display: block;
 height: 14px;
 position: absolute;
 right: -8px;
 top: 20px;
 width: 14px;
}

.timeline .timeline-box:nth-child(even):after {
 border-color:white;
 border-left: 1px solid #E5E5E5;
 border-bottom: 1px solid #E5E5E5;
 left: -8px;
 top: 52px;
}

 

CSS Timeline – Make it responsive !

You may think our CSS Timeline is finished but we have to do some fine touch to it, so, why not to make it responsive. We will make each article to switch to full width for mobile devices, with media queries,  and we also change position to our arrow and dot to fit on our timeline “line”. The following will code do that for you.

 

 

So, this is it. You have styled your new blog posts as a timeline with css only. Hope you liked this guide and if you did please like, share, tweet it or comment bellow if you have some suggestions on how to improve our css timeline. Also, check the live demo by clicking on the green button on top of the page. Thank you and see you soon!

Here you can learn how to make an awesome CSS Sticky Footer with few lines of code.