Judul : Membuat Grafik Bar Responsif dengan CSS
link : Membuat Grafik Bar Responsif dengan CSS
Membuat Grafik Bar Responsif dengan CSS
Membuat Grafik Bar Responsif dengan CSS - Haloo gengs, apa kabar? semoga baik ya, sebenernya Juragan lagi pengen posting tentang design theory, tapi apa daya kerjaan lagi kampret banget, alhasil cuma posting tutorial nih, tapi insha Allah tutorial membuat grafik bar responsif dengan css ini bermanfaat bagi semua.tutorial ini cocok banget buat kamu yang lagi bikin website portofolio, admin panel, atau web app lainnya, langsung aja ke kode HTML-nya yuk !
HTML
<div class="graph-cont">
<h1>Membuat Grafik Bar Responsif dengan CSS</h1>
<div class="bar bar1">50%</div>
<div class="bar bar2">72%</div>
<div class="bar bar3">87%</div>
<div class="bar bar4">30%</div>
</div>
CSS
.graph-cont{
width: calc(100% - 40px);
width: 100%;
max-width: 800px;
margin: 0 auto;
}
h1,h2,h3{
text-align: center;
color: #34495e;
}
.bar{
height: 30px;
max-width: 800px;
margin: 0 auto 10px auto;
line-height: 30px;
font-size: 16px;
color: white;
padding: 0 0 0 10px;
position: relative;
}
.bar::before{
content: '';
width: 100%;
position: absolute;
left: 0;
height: 30px;
top: 0;
z-index: -2;
background: #ecf0f1;
}
.bar::after{
content: '';
background: #2ecc71;
height: 30px;
transition: 0.7s;
display: block;
width: 100%;
-webkit-animation: bar-before 1 1.8s;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.bar1::after{
max-width: 50%;
}
.bar2::after{
max-width: 72%;
}
.bar3::after{
max-width: 87%;
}
.bar4::after{
max-width: 30%;
}
@-webkit-keyframes bar-before{
0%{
width: 0px;
}
100%{
width: 100%;
}
}
.how-cont{
width: calc(100% - 40px);
width: 100%;
max-width: 800px;
margin: 0 auto;
}
Sekian dulu ya gengs tutorial singkat ini, semoga bermanfaat gengs
Demikianlah Artikel Membuat Grafik Bar Responsif dengan CSS
Sekianlah artikel Membuat Grafik Bar Responsif dengan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Membuat Grafik Bar Responsif dengan CSS dengan alamat link https://jendeladuniainternet.blogspot.com/2015/12/membuat-grafik-bar-responsif-dengan-css.html
Thanks infonya...
BalasHapusMy blog