CSS3 Timeline

Developer
Krishna Babu
Size
3,032 Kb
Views
6,072
  1. CSS3 Timeline Previews
  2. CSS3 Timeline HTML Codes
  3. CSS3 Timeline CSS Codes

How do I make an css3 timeline?

Fully responsive mobile first CSS Timeline.. What is a css3 timeline? How do you make a css3 timeline? This script and codes were developed by Krishna Babu on 11 January 2023, Wednesday.

CSS3 Timeline Previews
IQ Test

CSS3 Timeline - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Timeline</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <p>Worked on all modern browers</p> <h1>CSS based responsive timeline</h1>
</header>
<ul class="timeline"> <!-- Item 1 --> <li> <div class="direction-r"> <div class="flag-wrapper"> <span class="hexa"></span> <span class="flag">Lorem ipsum.</span> <span class="time-wrapper"><span class="time">Feb 2015</span></span> </div> <div class="desc">Lorem ipsum Nisi labore aute do aute culpa magna nulla voluptate exercitation deserunt proident.</div> </div> </li> <!-- Item 2 --> <li> <div class="direction-l"> <div class="flag-wrapper"> <span class="hexa"></span> <span class="flag">Lorem ipsum Anim.</span> <span class="time-wrapper"><span class="time">Dec 2014</span></span> </div> <div class="desc">Lorem ipsum In ut sit in dolor nisi ex magna eu anim anim tempor dolore aliquip enim cupidatat laborum dolore.</div> </div> </li> <!-- Item 3 --> <li> <div class="direction-r"> <div class="flag-wrapper"> <span class="hexa"></span> <span class="flag">Lorem Occaecat.</span> <span class="time-wrapper"><span class="time">July 2014</span></span> </div> <div class="desc">Lorem ipsum Minim labore Ut cupidatat quis qui deserunt proident fugiat pariatur cillum cupidatat reprehenderit sit id dolor consectetur ut.</div> </div> </li>
</ul>
</body>
</html>

CSS3 Timeline - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Raleway:400,900);
body{ font-family: 'Raleway', sans-serif; color: #333;
}
header h1{ text-align: center; font-weight: bold; margin-top: 0;
} header p{ text-align: center; margin-bottom: 0; }
.hexa{ border: 0px; float: left; text-align: center; height: 35px; width: 60px; font-size: 22px; background: #f0f0f0; color: #3c3c3c; position: relative; margin-top: 15px;
}
.hexa:before{ content: ""; position: absolute; left: 0; width: 0; height: 0; border-bottom: 15px solid #f0f0f0; border-left: 30px solid transparent; border-right: 30px solid transparent; top: -15px;
}
.hexa:after{ content: ""; position: absolute; left: 0; width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 15px solid #f0f0f0; bottom: -15px;
}
.timeline { position: relative; padding: 0; width: 100%; margin-top: 20px; list-style-type: none;
}
.timeline:before { position: absolute; left: 50%; top: 0; content: ' '; display: block; width: 2px; height: 100%; margin-left: -1px; background: rgb(213,213,213); background: -moz-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1))); background: -webkit-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%); background: -o-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%); background: -ms-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%); background: linear-gradient(to bottom, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%); z-index: 5;
}
.timeline li { padding: 2em 0;
}
.timeline .hexa{ width: 16px; height: 10px; position: absolute; background: #00c4f3; z-index: 5; left: 0; right: 0; margin-left:auto; margin-right:auto; top: -30px; margin-top: 0;
}
.timeline .hexa:before { border-bottom: 4px solid #00c4f3; border-left-width: 8px; border-right-width: 8px; top: -4px;
}
.timeline .hexa:after { border-left-width: 8px; border-right-width: 8px; border-top: 4px solid #00c4f3; bottom: -4px;
}
.direction-l,
.direction-r { float: none; width: 100%; text-align: center;
}
.flag-wrapper { text-align: center; position: relative;
}
.flag { position: relative; display: inline; background: rgb(255,255,255); font-weight: 600; z-index: 15; padding: 6px 10px; text-align: left; border-radius: 5px;
}
.direction-l .flag:after,
.direction-r .flag:after { content: ""; position: absolute; left: 50%; top: -15px; height: 0; width: 0; margin-left: -8px; border: solid transparent; border-bottom-color: rgb(255,255,255); border-width: 8px; pointer-events: none;
}
.direction-l .flag { -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}
.direction-r .flag { -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}
.time-wrapper { display: block; position: relative; margin: 4px 0 0 0; z-index: 14; line-height: 1em; vertical-align: middle; color: #fff;
}
.direction-l .time-wrapper { float: none;
}
.direction-r .time-wrapper { float: none;
}
.time { background: #00c4f3; display: inline-block; padding: 8px;
}
.desc { position: relative; margin: 1em 0 0 0; padding: 1em; background: rgb(254,254,254); -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20); -moz-box-shadow: 0 0 1px rgba(0,0,0,0.20); box-shadow: 0 0 1px rgba(0,0,0,0.20); z-index: 15;
}
.direction-l .desc,
.direction-r .desc { position: relative; margin: 1em 1em 0 1em; padding: 1em; z-index: 15;
}
@media(min-width: 768px){ .timeline { width: 660px; margin: 0 auto; margin-top: 20px; } .timeline li:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .timeline .hexa { left: -28px; right: auto; top: 8px; } .timeline .direction-l .hexa { left: auto; right: -28px; } .direction-l { position: relative; width: 310px; float: left; text-align: right; } .direction-r { position: relative; width: 310px; float: right; text-align: left; } .flag-wrapper { display: inline-block; } .flag { font-size: 18px; } .direction-l .flag:after { left: auto; right: -16px; top: 50%; margin-top: -8px; border: solid transparent; border-left-color: rgb(254,254,254); border-width: 8px; } .direction-r .flag:after { top: 50%; margin-top: -8px; border: solid transparent; border-right-color: rgb(254,254,254); border-width: 8px; left: -8px; } .time-wrapper { display: inline; vertical-align: middle; margin: 0; } .direction-l .time-wrapper { float: left; } .direction-r .time-wrapper { float: right; } .time { padding: 5px 10px; } .direction-r .desc { margin: 1em 0 0 0.75em; }
}
@media(min-width: 992px){ .timeline { width: 800px; margin: 0 auto; margin-top: 20px; } .direction-l { position: relative; width: 380px; float: left; text-align: right; } .direction-r { position: relative; width: 380px; float: right; text-align: left; }
}
CSS3 Timeline - Script Codes
CSS3 Timeline - Script Codes
Home Page Home
Developer Krishna Babu
Username krishnab
Uploaded January 11, 2023
Rating 4.5
Size 3,032 Kb
Views 6,072
Do you need developer help for CSS3 Timeline?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Krishna Babu (krishnab) Script Codes
Name
Wipe slider
No effect slideshow
Flat UI Color Gradients
Customize Selector with Google Font
Javascript Tab
Page
Upload Button
Responsive Calendar
Paging
Floating menu
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!