Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pure CSS / HTML timeline
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet/less" type="text/css" href="timeline.less"/>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
<script type="text/javascript">
less = {
env: "development", // or "production"
async: false, // load imports async
fileAsync: false, // load imports async when in a page under
poll: 1000, // when in watch mode, time in ms between polls
functions: {}, // user functions, keyed by name
dumpLineNumbers: "comments", // or "mediaQuery" or "all"
relativeUrls: false// whether to adjust url's to be relative
};
</script>
</head>
<body>
<div class="content">
<ul class="timeline">
<li>
<p>Timeline record</p>
<span>May 2011</span>
</li>
<li>
<p>Some short record in gray box</p>
<span>June 2012</span>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
<span>July 2013</span>
</li>
<li>
<p>The long expected record. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</p>
<span>August 2014</span>
</li>
<li>
<p>Finally! Last record in timeline </p>
<span>October 2015</span>
</li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
font-size: 14px;
font-family: sans-serif;
}
.content {
width: 980px;
margin: 80px auto;
}
ul.timeline {
margin: 0;
padding: 0;
list-style-type: none;
border-right: 6px solid #74c53a;
width: 50%;
li {
margin: 40px 0;
display: block;
position: relative;
span {
position: absolute;
top: calc(~'50% - 10px');
font-weight: bold;
}
p {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 1em 28px;
padding: 3em;
text-align: center;
line-height: 2.1;
}
.timelinePoint() {
content: "";
background: #74c53a;
width: 10px;
height: 10px;
border: 3px solid #fff;
position: absolute;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50 spx;
}
&:nth-child(odd) {
p {
color: #fff;
background: #d74327;
&:after {
width: 12px;
content: '';
position: absolute;
display: block;
border-width: 22px 0 22px 16px;
border-style: solid;
border-color: transparent #d74327
;
right: 0;
top: 50%;
top: calc(~'50% - 22px');
}
}
span {
left: 100%;
margin-left: 20px;
white-space: nowrap;
color: #d74327;
}
&:after {
.timelinePoint();
float: left;
top: 50%;
top: calc(~'50% - 8px');
right: -11px;
background-color: #d74327;
}
}
&:nth-child(even) {
left: 100%;
margin-left: 6px;
p {
border: 1px solid #ddd;
&:after {
width: 0;
content: '';
position: absolute;
display: block;
border-width: 22px 16px 22px 0;
border-style: solid;
border-color: transparent #fff
;
left: 13px;
top: 50%;
top: calc(~'50% - 22px');
}
&:before {
width: 0;
content: '';
position: absolute;
display: block;
border-width: 22px 16px 22px 0;
border-style: solid;
border-color: transparent #ddd
;
left: 12px;
top: 50%;
top: calc(~'50% - 22px');
}
}
span {
right: 100%;
margin-right: 20px;
white-space: nowrap;
color: #74c53a;
}
&:before {
.timelinePoint();
float: right;
top: calc(~'50% - 8px');
left: -11px;
}
}
}
}
// <li class="red left"> or <li class="gray right">
ul.timeline {
margin: 0;
padding: 0;
list-style-type: none;
border-right: 6px solid #74c53a;
width: 50%;
li {
margin: 40px 0;
display: block;
position: relative;
span {
position: absolute;
top: calc(~'50% - 10px');
font-weight: bold;
}
p {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 1em 2em;
padding: 2em;
text-align: center;
line-height: 2.1;
}
.timelinePoint() {
content: "";
width: 10px;
height: 10px;
border: 3px solid #fff;
position: absolute;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50 spx;
}
&.short {
&.left {
margin-left: 8em;
}
&.right {
margin-right: 8em;
}
}
&.red {
p {
color: #fff;
background: #d74327;
&:after {
border-color: transparent #d74327
;
}
&:before {
display: none;
}
}
span {
color: #d74327;
}
&:before,
&:after {
background: #d74327;
}
}
&.gray {
p {
border: 1px solid #ddd;
&:after {
border-color: transparent #fff
;
}
&:before {
border-color: transparent #ddd
;
}
}
span {
color: #74c53a;
}
&:after,
&:before {
background-color: #74c53a;
}
}
&.left {
p {
&:after {
width: 12px;
content: '';
position: absolute;
display: block;
border-width: 22px 0 22px 16px;
border-style: solid;
right: 1px;
top: 50%;
top: calc(~'50% - 22px');
}
&:before {
width: 12px;
content: '';
position: absolute;
display: block;
border-width: 22px 0 22px 16px;
border-style: solid;
right: 0px;
top: 50%;
top: calc(~'50% - 22px');
}
}
span {
left: 100%;
margin-left: 20px;
white-space: nowrap;
}
&:after {
.timelinePoint();
float: left;
top: 50%;
top: calc(~'50% - 8px');
right: -11px;
}
}
&.right {
left: 100%;
margin-left: 6px;
p {
&:after {
width: 0;
content: '';
position: absolute;
display: block;
border-width: 22px 16px 22px 0;
border-style: solid;
left: 13px;
top: 50%;
top: calc(~'50% - 22px');
}
&:before {
width: 0;
content: '';
position: absolute;
display: block;
border-width: 22px 16px 22px 0;
border-style: solid;
left: 12px;
top: 50%;
top: calc(~'50% - 22px');
}
}
span {
right: 100%;
margin-right: 20px;
white-space: nowrap;
}
&:before {
.timelinePoint();
float: right;
top: calc(~'50% - 8px');
left: -11px;
}
}
}
}
@dyaa

This comment has been minimized.

Copy link

dyaa commented Sep 30, 2013

can i have a css version please !

@Anticom

This comment has been minimized.

Copy link

Anticom commented Oct 22, 2013

@dyaa http://less2css.org/
Compile it yourself, it's just a matter of copy and paste ;)

@Anticom

This comment has been minimized.

Copy link

Anticom commented Oct 22, 2013

@OzzyCzech could you add two classes to the timeline .pull-left & .pull-right ?
I want to place all my elements on one side (right side in my case) but the timeline still is centered on my screen, which causes a huge loss of space.

Timeline issue
Fullsize Image

Cheers!

@alerioja

This comment has been minimized.

Copy link

alerioja commented Mar 19, 2014

how can I make this a responsive timeline, namely one that wraps according to the screen size?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.