Jak stworzyć: Linia czasu

Naucz się, jak używać CSS do tworzenia responsywnej "linii czasu".

Linia czasu

2017

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

2016

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

2015

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

Spróbuj sam

Jak stworzyć linię czasu

Krok 1 - Dodaj HTML:

<div class="timeline">
  <div class="container left">
    <div class="content">
      <h2>2017</h2>
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h2>2016</h2>
      <p>Lorem ipsum..</p>
    </div>
  </div>
</div>

Krok 2 - Dodaj CSS:

* {
  box-sizing: border-box;
}
/* Ustawienie koloru tła */
body {
  background-color: #474e5d;
  font-family: Helvetica, sans-serif;
}
/* Rzeczywista osa czasu (pionowy suwak) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
/* Rzeczywista osa czasu (pionowy suwak) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: biały;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}
/* Kontener otaczający zawartość */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}
/* Kółko na osi czasu */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: biały;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}
/* Umieść kontener po lewej stronie */
.left {
  left: 0;
}
/* Umieść kontener po prawej stronie */
.right {
  left: 50%;
}
/* Dodaj strzałkę do lewego kontenera (wskazującą w prawo) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: średni sztywny biały;
  border-width: 10px 0 10px 10px;
  border-color: przezroczysty przezroczysty przezroczysty biały;
}
/* Dodaj strzałkę do prawego kontenera (wskazującą w lewo) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: średni sztywny biały;
  border-width: 10px 10px 10px 0;
  border-color: przezroczysty biały przezroczysty przezroczysty;
}
/* Napraw pozycję kółka w prawym kontenerze */
.right::after {
  left: -16px;
}
/* Faktyczna treść */
.content {
  padding: 20px 30px;
  background-color: biały;
  position: relative;
  border-radius: 6px;
}
/* Media query - odpowiedź na czas linii dla ekranów o szerokości mniejszej niż 600 pikseli */
@media screen and (max-width: 600px) {
/* Umieść timeline po lewej stronie */
  .timeline::after {
    left: 31px;
  }
/* Kontener pełnej szerokości */
  .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
/* Upewnij się, że wszystkie strzałki wskazują w lewo */
  .container::before {
    left: 60px;
    border: średni sztywny biały;
    border-width: 10px 10px 10px 0;
    border-color: przezroczysty biały przezroczysty przezroczysty;
  }
/* Upewnij się, że wszystkie kółka są w tym samym miejscu */
  .left::after, .right::after {
    left: 15px;
  }
/* Ustaw zachowanie wszystkich prawych kontenerów tak, aby było podobne do lewych kontenerów */
  .right {
    left: 0%;
  }
}

Spróbuj sam