Membuat Simple Timeline Animation CSS

Sharing Teknologi – Membuat Simple Timeline Animation Effect HTML CSS Di WordPress. HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur dasar halaman web.

Dikembangkan oleh Tim Berners-Lee pada tahun 1991, HTML menggunakan serangkaian “tags” atau tanda untuk mendefinisikan elemen-elemen seperti teks, gambar, tautan, dan formulir dalam dokumen web. HTML memberikan kerangka kerja untuk menyusun informasi secara hierarkis, memungkinkan browser untuk memahami dan menampilkan konten secara terstruktur.

CSS (Cascading Style Sheets) adalah bahasa gaya yang bekerja bersama HTML untuk mengatur tampilan dan presentasi halaman web. Fungsi utama CSS adalah mengontrol properti seperti warna, jenis font, tata letak, dan dekorasi elemen HTML. Ini memungkinkan pemisahan antara struktur dan desain, sehingga perubahan gaya dapat dilakukan tanpa memengaruhi struktur dasar halaman. CSS menggunakan selektor untuk memilih elemen yang akan diubah, dan properti untuk menentukan bagaimana perubahan tersebut diterapkan.

HTML dan CSS bekerja bersama untuk menciptakan pengalaman pengguna yang kaya dan estetis. HTML memberikan dasar struktural, mendefinisikan elemen-elemen dan hubungan hierarkisnya, sementara CSS menangani presentasi, memberikan desain dan tata letak yang menyempurnakan tampilan halaman web. Bersama-sama, keduanya memungkinkan pembuat web untuk membuat halaman yang menarik, responsif, dan konsisten di berbagai perangkat, membentuk fondasi dalam pengembangan web modern.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Simple Timeline Animation

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan. 

Untuk contoh hasilnya ada di paling bawah ya, silakan scroll ke bawah.

HTML

<div class="position-relative p-3 my-1 overflow-hidden">
<div class="simpletimeline">
	<ul class="cp-steps">
	  <li>01. Order</li>
	  <li>02. Offer</li>
	  <li>03. Confirm</li>
	</ul>
</div>
</div>

Style CSS

.simpletimeline ul.cp-steps{
  list-style: none;
  display:flex;
  padding-left:0;
  margin: 0;
}
.simpletimeline ul.cp-steps li{
  width:33.33%;
  color:#fff;
  font-size:18px;
  text-transform:uppercase;
  height:38px;
  line-height:39px;
  position:relative;
  text-align:center;
}
.simpletimeline ul.cp-steps li:nth-child(1){background:#0089cc;}
.simpletimeline ul.cp-steps li:nth-child(2){background:#026190;}
.simpletimeline ul.cp-steps li:nth-child(3){background:#001326;}
.simpletimeline ul.cp-steps li:nth-child(1):after{
  content:'';
  position:absolute;
  border-top:19px solid transparent;
  border-bottom:19px solid transparent;
  border-left:19px solid #0089cc;
  right:-18px;
  z-index:1;
  top:0;
}
.simpletimeline ul.cp-steps li:nth-child(2):after{
  content:'';
  position:absolute;
  border-top:19px solid transparent;
  border-bottom:19px solid transparent;
  border-left:19px solid #026190;
  right:-18px;
  z-index:1;
  top:0;
}
@media only screen and (max-width: 767px){
 .simpletimeline  ul.cp-steps li{
    font-size:15px;
  }
}
@media only screen and (max-width: 350px){
 .simpletimeline  ul.cp-steps li{
    font-size:13px;
  }
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.