Membuat Tampilan Tabs Cantik Dengan HTML CSS

Hallo rekan rekan, berjumpa lagi pada pembahasan seputar laman. Pada kesempatan kali ini kita akan belajar mengenai cara membangun tampilan tabs cantik dengan html css. Tampilan Tabs ini nantinya akan memberikan efek yang berbeda dari yang lain. Bagaimana cara membuatnya seketika saja simak strategi dibawah ini

Langkah Pertama-tama

Rekan-rekan bikin file HTML selaku struktur tampilannya yang berisi code dibawah ini:

<div class=row>
<input type=radio name=tabs id=tab-1 checked>
<label for=tab-1>Framework CodeIgniter</label>

<input type=radio name=tabs id=tab-2>
<label for=tab-2>Framework Laravel</label>

<input type=radio name=tabs id=tab-3>
<label for=tab-3>Framework YII</label>

<input type=radio name=tabs id=tab-4>
<label for=tab-4>Framework Zend</label>

Di code diatas input type=radio digunakan selaku tampilan tabs yang nanti di klik. Oke berikutnya bikin content yang terdapat bagi setiap alternatif dari tabs nya.

<div class=tabs>
<div>
<h3>Framework CodeIgniter</h3>
<p>Codeigniter adalah sebuah framework PHP yang menggunakan pola desain (design pattern) MVC (Model View Controller) </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est debitis odit quasi soluta aliquam ad praesentium cupiditate animi numquam veritatis, minima illo rerum doloremque aperiam eaque culpa mollitia eveniet quia.Est debitis odit quasi soluta aliquam ad praesentium cupiditate animi numquam veritatis, minima illo rerum doloremque aperiam eaque culpa mollitia eveniet quia.</p>
</div>

<div>
<h3>Framework Laravel</h3>
<p>Laravel ialah satu-satunya framework yang menolong Sahabat bagi memajukan pemakaian PHP di pada proses pengembangan laman. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est debitis odit quasi soluta aliquam ad praesentium cupiditate animi numquam veritatis, minima illo rerum doloremque aperiam eaque culpa mollitia eveniet quia. Est debitis odit quasi soluta aliquam ad praesentium cupiditate animi numquam veritatis, minima illo rerum doloremque aperiam eaque culpa mollitia eveniet quia.</p>
</div>

<div>
<h3>Framework YII</h3>
<p>Seperti kebanyakan framework php lain framework yii ialah MVC framework. </p>
<p>Framework YII ialah sebuah sistem aplikasi yang berfungsi selaku kerangka kerja php yang dengan komponen dengan performansi tinggi bagi perancangan sebuah program web bersekala besar, yii menyediakan resuabilitas maksimum pada pemrograman Web dan dapat mengakselerasi proses pengembangan secara signifikan.</p>
</div>

<div>
<h3>Framework Zend</h3>
<p>Zend Framework ialah sebuah Framework open source bagi web, memaksimalkan program dan layanan dengan PHP 5. Zend Framework diimplementasikan dengan menggunakan kode berorientasi obyek-100%.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est debitis odit quasi soluta aliquam ad praesentium cupiditate animi numquam veritatis, minima illo rerum doloremque aperiam eaque culpa mollitia eveniet quia. Est debitis odit quasi soluta aliquam ad praesentium cupiditate animi numquam veritatis, minima illo rerum doloremque aperiam eaque culpa mollitia eveniet quia.</p>
</div>
</div>
</div>

di code diatas ialah content dari masing-masing input type=radio.

Langkah Kedua

Dan berikutnya tentu bagi mempercantik tampilannya mesti menambahkan style CSS agar terlihat menarik, silahkan ketikkan code berikut:

*{box-sizing:border-box;}
body{background: #444444;color:#ffffff;}

.row{width: 750px;margin:50px auto;}
.row > input{display: none;}
.row > label{display: block;float: left;padding: 12px 20px;margin-right: 10px;cursor: pointer;transition: background-color 0.3s;border-top-left-radius: 20px;border-top-right-radius: 20px;}
.row > label:hover,
.row > input:checked + label{
background: #e6643c;
}

.tabs{clear:both;perspective: 599px;margin-left: -50px;}
.tabs > div{
width: 780px;
position: absolute;
border: 4px solid #0eb730;
padding: 10px 30px 40px;
line-height: 1.4em;
transform: rotateX(-20deg);
opacity: 0;
transform-origin: top center;
transition: opacity 0.3s, transform 1s;
z-index: 0;
border-radius: 50px 50px 25px 25px;
}

#tab-1:checked   .tabs >:nth-of-type(1),
#tab-2:checked   .tabs >:nth-of-type(2),
#tab-3:checked   .tabs >:nth-of-type(3),
#tab-4:checked   .tabs >:nth-of-type(4){
transform: rotateX(0);
opacity: 1;
z-index: 1;
}

Oke bila telah simpan kedua file diatas html dan css, lalu jalankan di browser masing-masing.

Saya kira lumayan pembahasan kali ini mengenai cara membangun tampilan  tabs cantik dengan html css. Semoga bermanfaat dan hingga jumpa dengan pembhasan lainnya.

terima kasih

 

Sumber https://kursuswebsite.org