Jak to zrobić Oś czasu na stronie? (RWD)

Czas czytania: 2 minut

Tym razem pokażę wam jak zbudować prostą oś czasu (timeline, linia czasu) na stronie internetowej z pomocą HTML i CSS. By ją zbudować i zrozumieć jak ją rozbudować lub przebudować przyda się przynajmniej podstawową wiedzę z obu języków.

Jak zbudować oś czasu w HTML i CSS?

Struktura HTML osi czasu

Na początek stworzymy sobie elementy naszej listy. Będzie to stosunkowo proste, a każdy element będzie wyglądał podobnie jak ten poniżej:

<div class="container left">
  <div class="content">
    <h2>2017</h2>
    <p>Some text..</p>
  </div>
</div>

Oczywiście musicie pamiętać by umieścić odpowiednie informacje we właściwych miejscach by miało to jakiś sens. Poza zawartością kontenera zmieniamy także klasę left na right by wyświetlił się on po prawej stronie.

Warto też pamiętać by spiąć wszystkie elementy wspólnym kontenerem:

<div class="timeline"><!-- zawartość osi --></div>

Kiedy mamy już strukturę pora na ustawienie elementów na swoje miejsca. Czyli CSS.

Ustawianie elementów osi czasu z CSS

Nasz kod będzie się więc przedstawiał następująco:

* {
  box-sizing: border-box;
}

/* kolor tła strony */
body {
  background-color: #253C59;
}

/* kontener osi czasu (linii czasu) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* ustawianie elementów w osi czasu */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* kontener z treścią */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* zaznaczenie miejsca na osi */
.container::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  right: -12px;
  background-color: #253C59;
  border: 4px solid #D9B70D;
  top: 15px;
  z-index: 1;
}

/* kontener na lewo */
.left {
  left: 0;
}

/* kontener na prawo */
.right {
  left: 50%;
}

/* dodawanie strzałki do lewego */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* dodawanie strzałki do prawego */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}


.right::after {
  left: -11px;
}

/* treść */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

By nasz kod był responsywny (RWD) trzeba jeszcze dodać do kodu CSS poniższy warunek:

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 650px) {
/* Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }

/* Full-width containers */
  .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

/* Make sure that all arrows are pointing leftwards */
  .container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

/* Make sure all circles are at the same spot */
  .left::after, .right::after {
    left: 15px;
  }

/* Make all right containers behave like the left ones */
  .right {
    left: 0%;
  }
}

Efektem końcowym będzie:

Powyższy kod bardzo łatwo jest zmodyfikować i dopasować do swoich potrzeb.