Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Timeline CSS container queries

Votre navigateur ne supporte pas cette démonstration.

  1. Lorem ipsum dolor

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex alias, rem at, quas quia delectus dolorem in molestias eos id est quod voluptatibus repudiandae nostrum.

  2. Lorem ipsum dolor

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

  3. Lorem ipsum dolor

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex alias, rem at, quas quia delectus dolorem in molestias eos id est quod voluptatibus repudiandae nostrum.

Le code :



<div class="timeline-cq">

<ol>

<li>

<div>
<time>Janvier 2022</time>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex alias, rem at, quas quia delectus dolorem in molestias eos id est quod voluptatibus repudiandae nostrum.</p>
</div>
</li>
	
<li>
<div>
<time>Février 2022</time>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</li>
       
<li>
<div>
<time>Mars 2022</time>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex alias, rem at, quas quia delectus dolorem in molestias eos id est quod voluptatibus repudiandae nostrum.</p>
</div>
</li>
      
</ol>

</div>
	



*,*::after,*::before{box-sizing:border-box}	

.timeline-cq {

max-width:900px;
margin: 4rem auto;
container: timeline/inline-size;
background-color: rgba(103, 83, 234, 0.3);
padding: 1rem;
border-radius: 1.25rem;
	
}	

.timeline-cq ol{
	
list-style-type: none;	
padding-left: 0;
margin: 0
	
	}
	
	
.timeline-cq li div{
display:grid;
grid-template: "cq";
height:100%;

}
.timeline-cq li div>*{

grid-area: cq;
margin-left:1rem

}

.timeline-cq li div::before,
.timeline-cq li div::after{

grid-area: cq;

}

	
.timeline-cq li:last-child  div::before {
  display:none
}


	
.timeline-cq li div::before {
	 
content: "";
width: 2px;
background-color: rgba(103, 83, 234, 0.3);
	 
}
	
.timeline-cq li div::after {

margin-left:-.625rem;
content: "";
width: 1.25rem;
aspect-ratio:1;
background-color: #6753ea;
box-shadow: 0 0 0 3px rgba(103, 83, 234, 0.3);
border-radius: 50%;
}

.timeline-cq h3 {
	
margin-top: 2rem;
place-self:start;
font-size: max(1rem, 1.5cqw + 8px);

}

.timeline-cq h3 + p{
	
margin-top:5rem
	
	}	
	


time {
	
place-self:start;

}


@container timeline (inline-size > 37.5rem) {
	
 .timeline-cq ol {

display: grid;
grid-template-columns: repeat(3,1fr);

  }
	
	
time{
	
justify-self:center;
margin-top: 1.5rem
	
	}
	
.timeline-cq li div::after,
.timeline-cq li div>*{
	
margin-left: unset
	
	}


.timeline-cq li:last-child  div::before {
	
display: block;
place-self: start;
	
}
	
.timeline-cq h3{
	
justify-self: center;
margin-top: 3rem
	
	}
	
.timeline-cq p{
	
padding:.5rem
	
	}	
	
.timeline-cq li div::before{
	
width: 50%;
place-self: start end;
height: 2px;
margin-top: .625rem
	
	}
	
.timeline-cq li:nth-child(2) div::before{
	
width:100%
	
	}	
	
	
.timeline-cq li div::after{
	 
	place-self:start center
	
	}
}



Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.