Issue
I'm trying to turn this timeline effect into a horizontal timeline, with the text blocks aligned horizontally and the "line" effect goes from left to right. I've tried multiple ways, and I somehow can't get it to look neat like it does vertically.
How it looks when vertical:
And here's some reproducible snippets for the vertical timeline effect:
:root {
--primary-color: #212121;
--background-color: #111;
--font: sans-serif;
}
* {
margin: 0;
padding: 0;
}
body {
background: var(--background-color);
font-family: var(--font);
display: flex;
justify-content: center;
}
/* Timeline Container */
.timeline {
background: var(--primary-color);
margin: 20px auto;
padding: 20px;
}
/* Card container */
.card {
position: relative;
max-width: 400px;
}
/* setting padding based on even or odd */
.card:nth-child(odd) {
padding: 30px 0 30px 30px;
}
.card:nth-child(even) {
padding: 30px 30px 30px 0;
}
/* Global ::before */
.card::before {
content: "";
position: absolute;
width: 50%;
border: solid orangered;
}
/* Setting the border of top, bottom, left */
.card:nth-child(odd)::before {
left: 0px;
top: -4.5px;
bottom: -4.5px;
border-width: 5px 0 5px 5px;
border-radius: 50px 0 0 50px;
}
/* Setting the top and bottom to "-5px" because earlier it was out of a pixel in mobile devices */
@media only screen and (max-width: 400px) {
.card:nth-child(odd)::before {
top: -5px;
bottom: -5px;
}
}
/* Setting the border of top, bottom, right */
.card:nth-child(even)::before {
right: 0;
top: 0;
bottom: 0;
border-width: 5px 5px 5px 0;
border-radius: 0 50px 50px 0;
}
/* Removing the border if it is the first card */
.card:first-child::before {
border-top: 0;
border-top-left-radius: 0;
}
/* Removing the border if it is the last card and it's odd */
.card:last-child:nth-child(odd)::before {
border-bottom: 0;
border-bottom-left-radius: 0;
}
/* Removing the border if it is the last card and it's even */
.card:last-child:nth-child(even)::before {
border-bottom: 0;
border-bottom-right-radius: 0;
}
/* Information about the timeline */
.info {
display: flex;
flex-direction: column;
background: #333;
color: gray;
border-radius: 10px;
padding: 10px;
}
/* Title of the card */
.title {
color: orangered;
position: relative;
}
/* Timeline dot */
.title::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 999px;
border: 3px solid orangered;
}
/* text right if the card is even */
.card:nth-child(even)>.info>.title {
text-align: right;
}
/* setting dot to the left if the card is odd */
.card:nth-child(odd)>.info>.title::before {
left: -45px;
}
/* setting dot to the right if the card is odd */
.card:nth-child(even)>.info>.title::before {
right: -45px;
}<div class="timeline">
<div class="outer">
<div class="card">
<div class="info">
<h3 class="title">Title 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">Title 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">Title 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">Title 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">Title 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
</div>
</div>
</div>
</div>I'm not sure why but I am not able to make it vertical by using display: flex; and flex-direction: row;
This is what I tried:
:root {
--primary-color: #212121;
--background-color: #111;
--font: sans-serif;
}
* {
margin: 0;
padding: 0;
}
body {
background: var(--background-color);
font-family: var(--font);
display: flex;
justify-content: center;
}
/* Timeline Container */
/* Other styles remain unchanged */
/* Timeline Container */
.timeline {
white-space: nowrap;
overflow-x: auto;
display: flex;
flex-direction: row;
align-items: center;
width:100%;
min-height:100vh;
/* Align cards in the middle */
}
/* Card container */
.card {
display: inline-block;
vertical-align: top;
/* Keep cards aligned at the top */
max-width: none;
/* Remove max-width restriction */
width: auto;
/* Auto width based on content */
}
/* Removing padding adjustments based on odd/even */
.card {
padding: 0 30px;
}
/* Global ::before adjustments for horizontal layout */
.card::before {
height: 50%;
width: 100%;
top: 50%;
left: 0;
}
/* Adjusting the "snake" line for all cards */
.card::before {
border-width: 5px 5px 0 5px;
border-radius: 50px 50px 0 0;
}
/* First card adjustments */
.card:first-child::before {
border-left: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* Last card adjustments */
.card:last-child::before {
border-right: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
/* Information about the timeline */
.info {
width:50%;/* Adjust width or max-width here if necessary */
}
/* Timeline dot */
.title::before {
top: -45px;
/* Adjust as necessary */
left: 50%;
/* Center dot horizontally */
margin-left: -5px;
/* Adjust margin to center the dot */
}
/* Remove text alignment and dot positioning based on odd/even */
.card>.info>.title {
text-align: left;
}
.card>.info>.title::before {
right: auto;
}
@media only screen and (max-width: 768px) {
/* Adjustments for smaller screens */
.card {
padding: 0 15px;
}
.title::before {
top: -35px;
/* Adjust as necessary for smaller screen */
}
}
/* Additional media queries can be added for responsive adjustments */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="timeline_styles.css">
</head>
<body>
<div class="timeline">
<div class="outer">
<div class="card">
<div class="info">
<h3 class="title">Title 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">Title 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">Title 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">Title 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">Title 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
</div>
</div>
</div>
</div>
</body>
</html>I was attempting the following changes:
- The
.timelinecontainer is now a flex container with a row direction, enabling horizontal layout. - The
.cardelements are displayed inline-block without max-width and vertical alignment to the top. - Pseudo-element
.card::before adjustmentsnow create a horizontal line across each card. - The
.title::beforeadjustment positions the dot above each title.
What I'm hoping to achieve would look like that:
If anybody could tell me why is my logic wrong.
Solution
- the "snake" elements (
::before) should be of height 50%` - add border transparent to the snake top or bottom border for odd, even order
- move even elements to top 50%
- Clip-path the excessive border curves from the first and list item
Given the above simplification, here's an example with which you can play adjusting the CSS var --m (margin/spacing) --w (snake width/thickness) --r (radius)
*,
*::before,
*::after {
margin: 0;
box-sizing: border-box;
}
body {
font: 1rem/1.4 sans-serif;
}
/* Timeline Container */
.timeline {
--m: 2rem;
/* margin */
--w: 10px;
/* Snake width (thickness) */
--r: 2rem;
/* Radius */
display: flex;
padding: 3rem;
gap: var(--m);
}
/* Card container */
.card {
position: relative;
flex: 1 0 auto;
width: 400px;
border: var(--b) solid #000;
padding: 2rem;
border-radius: 1rem;
box-shadow: inset 0 0 0 2px #000;
h3 {
padding: 0 0 1rem 0;
}
/* Snake line */
&::before {
content: "";
position: absolute;
left: calc(var(--m) / -2 - var(--w) / 2);
width: calc(100% + var(--m) + var(--w));
height: calc(50% + var(--m) / 2 + var(--w));
border: var(--w) solid orange;
opacity: 0.5;
}
&:first-child::before {
clip-path: polygon(var(--r) 0, 100% 0, 100% 100%, var(--r) 100%);
}
&:last-child::before {
clip-path: polygon(0 0, calc(100% - var(--r)) 0, calc(100% - var(--r)) 100%, 0 100%);
}
&:nth-child(odd)::before {
top: calc(var(--m) / -2 - var(--w));
border-radius: var(--r) var(--r) 0 0;
border-bottom: transparent;
}
&:nth-child(even)::before {
top: 50%;
border-radius: 0 0 var(--r) var(--r);
border-top: transparent;
}
/* Pills */
&::after {
position: absolute;
left: 50%;
content: attr(data-desc);
background: orange;
color: #fff;
font-weight: 900;
padding: 1rem;
border-radius: var(--r);
}
&:nth-child(odd)::after {
top: 0%;
translate: -50% calc(-50% - var(--m) / 2 - var(--w) / 2);
}
&:nth-child(even)::after {
top: 100%;
translate: -50% calc(-50% + var(--m) / 2 + var(--w) / 2);
}
}<div class="timeline">
<div class="card" data-desc="1999">
<div class="info">
<h3 class="title">Title 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
</div>
</div>
<div class="card" data-desc="2010">
<div class="info">
<h3 class="title">Title 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
</div>
</div>
<div class="card" data-desc="2013">
<div class="info">
<h3 class="title">Title 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
</div>
</div>
<div class="card" data-desc="2022">
<div class="info">
<h3 class="title">Title 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
</div>
</div>
<div class="card" data-desc="2024">
<div class="info">
<h3 class="title">Title 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
</div>
</div>
</div>Answered By - Roko C. Buljan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.