Membuat Tampilan Tabs Cantik Dengan HTML CSS

Hallo sahabat, berjumpa lagi dalam pembahasan seputar website. Dalam kesempatan kali ini kita akan belajar tentang cara membuat tampilan tabs cantik dengan html css. Tampilan Tabs ini nantinya akan memberikan efek yang berbeda dari yang lain. Bagaimana cara membuatnya langsung saja simak langkah-langkah dibawah ini

Langkah Pertama

Sahabat buat file HTML sebagai 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>

Pada code diatas input type=radio digunakan sebagai tampilan tabs yang nanti di klik. Oke selanjutnya buat content yang ada untuk setiap pilihan dari tabs nya.

<div class="tabs">
			<div>
				<h3>Framework CodeIgniter</h3>
				<p>Codeigniter merupakan 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 adalah satu-satunya framework yang membantu Anda untuk memaksimalkan penggunaan PHP di dalam proses pengembangan website. </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 adalah MVC framework. </p>
				<p>Framework YII adalah sebuah software yang berfungsi sebagai kerangka kerja php yang berbasis komponen dengan performansi tinggi untuk pembuatan sebuah aplikasi web bersekala besar, yii menyediakan resuabilitas maksimum dalam pemrograman Web dan bisa mengakselerasi proses pengembangan secara signifikan.</p>
			</div>

			<div>
				<h3>Framework Zend</h3>
				<p>Zend Framework adalah sebuah Framework open source untuk web, mengembangkan aplikasi 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>

pada code diatas adalah content dari masing-masing input type=radio.

Langkah Kedua

Dan selanjutnya tentu untuk mempercantik tampilannya harus 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 jika sudah simpan kedua file diatas html dan css, lalu jalankan pada browser masing-masing.

Saya kira cukup pembahasan kali ini tentang cara membuat tampilan  tabs cantik dengan html css. Semoga bermanfaat dan sampai jumpa dengan pembhasan lainnya.

terima kasih

The post Membuat Tampilan Tabs Cantik Dengan HTML CSS appeared first on Kursus Website Terbaik.