Membuat Efek Timeline Vertikal Keren Dengan CSS3 Cocok Untuk Lending Page

by -7 views
Membuat Efek Timeline Vertikal Keren Dengan CSS3

 

Labkom99.com – Berikut ini adalah membuat efek timeline vertikal keren dengan CSS3. Efek khusus yang digunakan pada timeline vertikal CSS3 ini menggunakan elemen semu untuk membuat setengah lingkaran yang keren. Semua setengah lingkaran dihubungkan sebagai jalur lengkung untuk membentuk sebuah timeline.

 

 

Membuat Efek Timeline Vertikal Keren Dengan CSS3

 

 

Artikel HTML Dan CSS Lain Yang Juga Dapat Pelajari :

1. Membuat Menu Navigasi Responsive HTML5

2. Membuat Animasi Gelombang (Wave Animation) Dengan CSS3

3. Membuat Template Menu Sidebar Material Design HTML5

4. Membuat Efek Teks 3D Marquee Super Keren Dengan CSS3

5. Membuat efek animasi teks keren menggunakan HTML5

6. Membuat Parallax Scrolling Dengan HTML CSS SVG Dan JQuery

7. Membuat Efek Background Lampu Neon Dengan HTML5 Dan Canvas

8. Membuat Animasi Kursor Mouse Dengan HTML Dan Canvas

9. Membuat Animasi Teks Dengan HTML5 Dan Canvas

10. 30 Efek Animasi Mouse Hover Tombol Button Keren Dengan HTML Dan CSS3

 

 

1. Struktur HTML

Berikut ini adalah struktur HTML untuk membuat efek timeline vertikal keren dengan CSS3. Pada dasarnya struktur HTML ini hanya untuk memanggil informasi yang akan ditampilkan.

 

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-timeline">
<div class="timeline">
<div class="timeline-icon"><span class="year">2021</span></div>
<div class="timeline-content">
<h3 class="title">Labkom99 | MacBook</h3>
<p class="description">
Ini adalah salah satu situs yang diperuntukkan menambah pengetahuan gratis tentang pemrograman, Akun Sosial, Google Update, Pembaruan Windows, Mac dan Banyak Lagi !!!
</p>
</div>
</div>

<div class="timeline">
<div class="timeline-icon"><span class="year">2020</span></div>
<div class="timeline-content">
<h3 class="title">Labkom99 | Komputer</h3>
<p class="description">
Ini adalah salah satu situs yang diperuntukkan menambah pengetahuan gratis tentang pemrograman, Akun Sosial, Google Update, Pembaruan Windows, Mac dan Banyak Lagi !!!
</p>
</div>
</div>

<div class="timeline">
<div class="timeline-icon"><span class="year">2019</span></div>
<div class="timeline-content">
<h3 class="title"> Labkom99 | Windows</h3>
<p class="description">
Ini adalah salah satu situs yang diperuntukkan menambah pengetahuan gratis tentang pemrograman, Akun Sosial, Google Update, Pembaruan Windows, Mac dan Banyak Lagi !!!
</p>
</div>
</div>

<div class="timeline">
<div class="timeline-icon"><span class="year">2018</span></div>
<div class="timeline-content">
<h3 class="title">Labkom99 | HTML</h3>
<p class="description">
Ini adalah salah satu situs yang diperuntukkan menambah pengetahuan gratis tentang pemrograman, Akun Sosial, Google Update, Pembaruan Windows, Mac dan Banyak Lagi !!!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
 
Pada <div class=”timeline”> itu adalah tempat di mana informasi timeline di letakkan. Informasi tersebut miliputi informasi tahun, Judul atau title timeline dan deskripsi.
 
 

2. Style CSS

Untuk CSS berikut ini adah untuk mebuat lingkaran pada timeline. Membuat warna agar lebih menarik.

 

.main-timeline{
overflow: hidden;
position: relative;
}
.main-timeline .timeline{
position: relative;
margin-top: -79px;
}
.main-timeline .timeline:first-child{ margin-top: 0; }
.main-timeline .timeline:before,
.main-timeline .timeline:after{
content: "";
display: block;
width: 100%;
clear: both;
}
.main-timeline .timeline:before{
content: "";
width: 100%;
height: 100%;
box-shadow: -8px 0 5px -5px rgba(0, 0, 0, 0.5) inset;
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
.main-timeline .timeline-icon{
width: 210px;
height: 210px;
border-radius: 50%;
border: 25px solid transparent;
border-top-color: #b7977b;
border-right-color: #b7977b;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
transform: rotate(45deg);
}
.main-timeline .year{
display: block;
width: 110px;
height: 110px;
line-height: 110px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
margin: auto;
font-size: 30px;
font-weight: bold;
color: #b7977b;
text-align: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transform: rotate(-45deg);
}
.main-timeline .timeline-content{
width: 35%;
float: right;
background: #b7977b;
padding: 30px 20px;
margin: 50px 0;
z-index: 1;
position: relative;
}
.main-timeline .timeline-content:before{
content: "";
width: 20%;
height: 15px;
background: #b7977b;
position: absolute;
top: 50%;
left: -20%;
z-index: -1;
transform: translateY(-50%);
}
.main-timeline .title{
font-size: 20px;
font-weight: bold;
color: #fff;
margin: 0 0 10px 0;
}
.main-timeline .description{
font-size: 16px;
color: #fff;
line-height: 24px;
margin: 0;
}
.main-timeline .timeline:nth-child(2n):before{ box-shadow: 8px 0 5px -5px rgba(0, 0, 0, 0.5) inset; }
.main-timeline .timeline:nth-child(2n) .timeline-icon{ transform: rotate(-135deg); }
.main-timeline .timeline:nth-child(2n) .year{ transform: rotate(135deg); }
.main-timeline .timeline:nth-child(2n) .timeline-content{ float: left; }
.main-timeline .timeline:nth-child(2n) .timeline-content:before{
left: auto;
right: -20%;
}
.main-timeline .timeline:nth-child(2n) .timeline-icon{
border-top-color: #022636;
border-right-color: #022636;
}
.main-timeline .timeline:nth-child(2n) .year{ color: #022636; }
.main-timeline .timeline:nth-child(2n) .timeline-content,
.main-timeline .timeline:nth-child(2n) .timeline-content:before{ background: #022636; }
.main-timeline .timeline:nth-child(3n) .timeline-icon{
border-top-color: #ad9dff;
border-right-color: #ad9dff;
}
.main-timeline .timeline:nth-child(3n) .year{ color: #ad9dff; }
.main-timeline .timeline:nth-child(3n) .timeline-content,
.main-timeline .timeline:nth-child(3n) .timeline-content:before{ background: #ad9dff; }
.main-timeline .timeline:nth-child(4n) .timeline-icon{
border-top-color: #940688;
border-right-color: #940688;
}
.main-timeline .timeline:nth-child(4n) .year{ color: #940688; }
.main-timeline .timeline:nth-child(4n) .timeline-content,
.main-timeline .timeline:nth-child(4n) .timeline-content:before{ background: #940688; }
@media only screen and (max-width: 1199px){
.main-timeline .timeline{ margin-top: -103px; }
.main-timeline .timeline-content:before{ left: -18%; }
.main-timeline .timeline:nth-child(2n) .timeline-content:before{ right: -18%; }
}
@media only screen and (max-width: 990px){
.main-timeline .timeline{ margin-top: -127px; }
.main-timeline .timeline-content:before{ left: -2%; }
.main-timeline .timeline:nth-child(2n) .timeline-content:before{ right: -2%; }
}
@media only screen and (max-width: 767px){
.main-timeline .timeline{
margin-top: 0;
overflow: hidden;
}
.main-timeline .timeline:before,
.main-timeline .timeline:nth-child(2n):before{
box-shadow: none;
}
.main-timeline .timeline-icon,
.main-timeline .timeline:nth-child(2n) .timeline-icon{
margin-top: -30px;
margin-bottom: 20px;
position: relative;
transform: rotate(135deg);
}
.main-timeline .year,
.main-timeline .timeline:nth-child(2n) .year{ transform: rotate(-135deg); }
.main-timeline .timeline-content,
.main-timeline .timeline:nth-child(2n) .timeline-content{
width: 100%;
float: none;
border-radius: 0 0 20px 20px;
text-align: center;
padding: 25px 20px;
margin: 0 auto;
}
.main-timeline .timeline-content:before,
.main-timeline .timeline:nth-child(2n) .timeline-content:before{
width: 15px;
height: 25px;
position: absolute;
top: -22px;
left: 50%;
z-index: -1;
transform: translate(-50%,0);
}
}
 

Jangan lupa tambahkan script bootstrap.min.css untuk melengkapi tampilan CSSnya.

 

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
 

 3. Preview Efek Timeline CSS3

 

Untuk yang ingin melihat Hasil Membuat Efek Timeline Vertikal Keren Dengan CSS3 Atau mau belajar membuat silahkan kunjingi link dibawah ini :

 

 Demo     |    Download

About Author: labkom99

Gravatar Image
Labkom99 merupakan salah satu situs yang diperuntukkan menambah pengetahuan gratis tentang pemrograman, Akun Sosial, Google Update, Pembaruan Windows, Mac dan Banyak Lagi !!!