Skip to content

Instantly share code, notes, and snippets.

@RyanJ93

RyanJ93/example.html

Created March 1, 2018 08:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RyanJ93/2fcb250e6dc2c7f3f06962c386af4103 to your computer and use it in GitHub Desktop.
Save RyanJ93/2fcb250e6dc2c7f3f06962c386af4103 to your computer and use it in GitHub Desktop.
Download ZIP
CSS 3 timeline.
Raw
example.html
<!doctype html>
<html>
<head>
<title>CSS 3 timeline example.</title>
<!-- Import the external stylesheet. -->
<link rel="stylesheet" href="library.css" />
<!-- Add a nice font. -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />
</head>
<body>
<!-- Create the timeline. -->
<div class="timeline">
<!-- Create an entry on the timeline. -->
<div class="timeline-entry">
<!-- Wrap all entry contents in a div to apply margin, border and so on... -->
<div class="timeline-entry-container">
<!-- Wrap the title and the date within a div to apply a different background color. -->
<div class="timeline-entry-header">
<p class="timeline-entry-title">A timeline in CSS 3</p>
<p class="timeline-entry-date">March 1</p>
</div>
<!-- Wrap the entry text here. -->
<div class="timeline-entry-body">
<p class="timeline-entry-text">Using CSS 3, create a timeline is extremely simple!</p>
</div>
</div>
</div>
<div class="timeline-entry">
<div class="timeline-entry-container">
<div class="timeline-entry-header">
<p class="timeline-entry-title">Automatic layout</p>
<p class="timeline-entry-date">March 1</p>
</div>
<div class="timeline-entry-body">
<p class="timeline-entry-text">Entries on the timeline are automatically aligned using the "<i>:nth-child</i>" pseudo-class.</p>
</div>
</div>
</div>
<div class="timeline-entry">
<div class="timeline-entry-container">
<div class="timeline-entry-header">
<p class="timeline-entry-title">Internet Explorer 9 support.</p>
<p class="timeline-entry-date">March 1</p>
</div>
<div class="timeline-entry-body">
<p class="timeline-entry-text">Avoiding using flexbox allows you to gain support for IE 9 and greater versions.</p>
</div>
</div>
</div>
<div class="timeline-entry">
<div class="timeline-entry-container">
<div class="timeline-entry-header">
<p class="timeline-entry-title">Responsive</p>
<p class="timeline-entry-date">March 1</p>
</div>
<div class="timeline-entry-body">
<p class="timeline-entry-text">Mobile devices are fully supported.</p>
</div>
</div>
</div>
<!-- Create the middle line. -->
<div class="timeline-line"></div>
</div>
</body>
</html>
Raw
library.css
/* Define style for the time line container. */
.timeline{
width:100%;
max-width:800px;
margin:auto;
position:relative;
padding:24px 0px;
}
/* Create the main line. */
.timeline-line{
width:5px;
height:100%;
margin:auto;
background-color:rgb(62, 147, 212);
position:absolute;
top:0px;
left:0px;
right:0px;
border-radius:3px;
z-index:-1;
}
/* Create the container for each entry on the time line. */
.timeline-entry{
width:50%;
box-sizing:border-box;
position:relative;
}
/* Add the style to the element that will wrap the entry content. */
.timeline-entry-container{
box-sizing:border-box;
border:1px solid rgb(62, 147, 212);
border-radius:3px;
background-color:#FFF;
overflow:hidden;
}
/* Move the odd entries to the right. */
.timeline-entry:nth-child(odd){
margin-left:50%;
}
/* Define the margin from the middle line and the text alignment for odd entries. */
.timeline-entry:nth-child(odd) .timeline-entry-container{
margin-left:24px;
text-align:left;
}
/* Create the left arrow for the odd entries. */
.timeline-entry:nth-child(odd):before{
content:'';
display:block;
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid rgb(62, 147, 212);
position:absolute;
left:16px;
top:14px;
z-index:20;
}
/* Create the point on the middle line for the odd entries. */
.timeline-entry:nth-child(odd):after{
content:'';
display:block;
width:19px;
height:19px;
position:absolute;
left:-9px;
top:12px;
background-color:rgb(62, 147, 212);
border:6px solid #FFF;
border-radius:18px;
box-sizing:border-box;
z-index:10;
}
/* Define the margin from the middle line and the text alignment for even entries. */
.timeline-entry:nth-child(even) .timeline-entry-container{
margin-right:24px;
text-align:right;
}
/* Create the left arrow for the even entries. */
.timeline-entry:nth-child(even):before{
content:'';
display:block;
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-left:8px solid rgb(62, 147, 212);
position:absolute;
right:16px;
top:14px;
z-index:20;
}
/* Create the point on the middle line for the even entries. */
.timeline-entry:nth-child(even):after{
content:'';
display:block;
width:19px;
height:19px;
position:absolute;
right:-10px;
top:12px;
background-color:rgb(62, 147, 212);
border:6px solid #FFF;
border-radius:18px;
box-sizing:border-box;
z-index:10;
}
@media(max-width:600px){
.timeline-entry{
/* Resize all entries to fit the whole container width. */
margin:0 !important;
width:100% !important;
}
/* Define the same top margin and text alignment for all entries. */
.timeline-entry .timeline-entry-container{
margin:36px 0px !important;
text-align:center !important;
}
/* Create the top arrow for all entries. */
.timeline-entry:before{
border-top:none !important;
border-left:8px solid transparent !important;
border-right:8px solid transparent !important;
border-bottom:8px solid rgb(62, 147, 212) !important;
margin:auto !important;
right:0px !important;
left:0px !important;
top:-8px !important;
}
/* Create the point on the middle line for all entries. */
.timeline-entry:after{
margin:auto !important;
right:0px !important;
left:0px !important;
top:-25px !important;
}
}
/* Define the style for the header that contains the title and the date. */
.timeline-entry-header{
background-color:rgb(62, 147, 212);
padding:12px;
box-sizing:border-box;
width:100%;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
/* Define the style for the element that contains the text. */
.timeline-entry-body{
padding:12px;
box-sizing:border-box;
width:100%;
}
/* Define the style for the entry title. */
.timeline-entry-title{
padding:0px;
margin:0;
font-family:'Raleway';
font-style:normal;
font-weight:400;
font-size:16px;
color:#FFF;
width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* Define the style for the entry date. */
.timeline-entry-date{
padding:0px;
margin:0;
font-family:'Raleway';
font-style:normal;
font-weight:400;
font-size:11px;
color:#DDD;
line-height:0.75;
width:100%;
white-space:nowrap;
text-overflow:ellipsis;
}
/* Define the style for the entry text. */
.timeline-entry-text{
padding:0px;
margin:0;
font-family:'Raleway';
font-style:normal;
font-weight:400;
font-size:12px;
color:#666;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment