Créer une timeline épurée et moderne

Que ce soit pour montrer un processus d'achat, les points importants de votre carrière sur votre portfolio, ou toute autre chose, apprenez à créer une timeline épurée et moderne pour le mettre en valeur !

LLLouis-Nicolas Leuillet

Mis à jour le 3 décembre 2024

Vous pouvez retrouver l'ensemble de ce tutoriel sur notre compte Instagram.

1ère étape

Commençons par le code HTML.

HTML

<div class="timeline">
  <div class="timeline-object complete">
    <div class="timeline-status"></div>
    <div class="timeline-content">
      <h3>Début de la formation</h3>
      <span>19.06.2020</span>
    </div>
  </div>
  
  <div class="timeline-object complete">
    <div class="timeline-status"></div>
    <div class="timeline-content">
      <h3>Projet final</h3>
      <span>05.07.2020</span>
    </div>
  </div>
  
  <div class="timeline-object">
    <div class="timeline-status"></div>
    <div class="timeline-content">
      <h3>Remise de diplômes</h3>
      <span>17.09.2020</span>
    </div>
  </div>
</div>

Chaque élément de la timeline dispose de son propre objet timeline-object.

2ème étape

Evitons les problèmes de padding.

CSS

* {
  box-sizing: border-box;
}

Cette petite astuce permet de dire que tous les éléments du site ( * ) doivent intégrer leurs padding dans leur taille.

3ème étape

Stylisons maintenant chaque objet de la timeline.

CSS

.timeline-object {
  display: flex;
  align-items: center;
  margin-top: 50px;
  position: relative;
}

Rien de très particulier à ajouter : on utilise flexbox pour centrer les éléments ensemble.

4ème étape

Attaquons maintenant l'affichage des objets lorsqu'ils sont complétés.

CSS

.timeline-object.complete::after {
  content: '';
  display: block;
  position: absolute;
  
  width: 4px;
  height: 100px;
  background-color: #1DBF73;
  
  left: 23px;
  top: 50px;
  transform: translateX(-50%);
}

5ème étape

On s'occupe du status des éléments.

CSS

.timeline-status {
  height: 46px;
  width: 46px;
  border-radius: 50%;
  background-color: #1DBF73;
}

Chaque élément sera représenté par une petite icône en forme de rond.

6ème étape

Il faut maintenant s'occuper du status des éléments non complétés.

CSS

.timeline-object:not(.complete) .timeline-status {
  background: #ffffff;
  border: 4px solid #C5C5C5;
}

Les éléments non complétés sont maintenant représentés par un cercle aux bordures grises.

7ème étape

Stylisons maintenant le contenu de chacun des objets : le titre et la balise span.

CSS

.timeline-content {
  margin-left: 15px;
}

.timeline-content h3 {
  color: #1DBF73;
  background: #CFF6CF;
  padding: 5px 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.timeline-content span {
  color: #103B27;
  font-size: .9em;
  font-weight: bold;
}

8ème étape

Il suffit maintenant de s'occuper du cas d'un titre non complété pour finir notre timeline.

CSS

.timeline-object:not(.complete) .timeline-content h3 {
  color: #8A8A8A;
  background: #E1E1DF;
}

Les éléments non complétés ont enfin un titre grisé.

Catégorie : Développement