Selamat Datang

Mendesain Halaman FAQ Keren Dengan CSS3

Pada tutorial web design kali ini kita akan mencoba membuat halaman FAQ dengan menggunakan CSS3.

Frequently Asked Questions atau disingkat FAQ sering kali kita temui di website, FAQ biasanya berisikan pertanyaan-pertanyaan yang sering diajukan oleh pengunjung sebuah website kepada pemilik website. Dari pada lelah menjawab pertanyaan yang sama secara berulang kali, makanya dibuat satu halaman yang berisi kumpulan pertanyaan-pertanyaan yang sering diajukan pengunjung.

FAQ with CSS3

Pada tutorial kali ini kita akan membuat nya dengan menggunakan CSS3.

Ada 2 versi yang akan dibuat, cuma beda sedikit kok:

  1. Versi Checkbox: Dimana semua jawaban bisa kita buka/kita pilih dengan cara melakukan klik
  2. Versi Radio Button: Dimana hanya bisa membuka 1 jawaban.
Berikut ini hasilnya

 

 

Struktur HTML

Kita mulai dengan membuat struktur markup HTML

		<section class="faq">
			<div class="faq-left">
				<!-- FAQ LEFT -->
			</div>

			<div class="faq-right">
				<!-- FAQ RIGHT -->
			</div>
		</section>

FAQ LEFT

<div class="faq-left">
				<h2>.:: Versi Checkbox ::.</h2>
				<ul class="faq-container">

						<li>
							<label for="q1">Q: Lorem ipsum dolor sit amet, consectetur adipisicing elit? </label> <input name="question" id="q1" type="checkbox" value="">
							<div class="answer">
								<p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
							</div>
						</li>

						<li>
							<label for="q2">Q: Consectetur vel pellentesque quis? </label> <input name="question" id="q2" type="checkbox" value="">
							<div class="big">
								<p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
								<p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
							</div>
						</li>

						<li>
							<label for="q3">Q: Morbi ut nibh nisi? </label> <input name="question" id="q3" type="checkbox" value="" checked="checked">
							<div class="answer">
								<p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
							</div>
						</li>

						<li>
							<label for="q4">Q: Vestibulum porta sollicitudin erat? </label> <input name="question" id="q4" type="checkbox" value="">
							<div class="answer">
								<p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
							</div>
						</li>
				</ul>

			</div>

FAQ RIGHT

			<div class="faq-right">

				<h2>.:: Versi Radio Button ::.</h2>
				<ul class="faq-container">

						<li>
							<label for="q1b">Q: Lorem ipsum dolor sit amet, consectetur adipisicing elit? </label> <input name="question" id="q1b" type="radio" value="">
							<div class="answer">
								<p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
							</div>
						</li>

						<li>
							<label for="q2b">Q: Consectetur vel pellentesque quis? </label> <input name="question" id="q2b" type="radio" value="">
							<div class="big">
								<p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
								<p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
							</div>
						</li>

						<li>
							<label for="q3b">Q: Morbi ut nibh nisi? </label> <input name="question" id="q3b" type="radio" value="" checked="checked">
							<div class="answer">
								<p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
							</div>
						</li>

						<li>
							<label for="q4b">Q: Vestibulum porta sollicitudin erat? </label> <input name="question" id="q4b" type="radio" value="">
							<div class="answer">
								<p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
							</div>
						</li>
				</ul>

			</div>

Setelah selesai dengan Struktur HTML, waktunya kita percantik dengan CSS

Code CSS

Pertama kita mengatur tata letak terlebih dahulu

	.faq{
		width:1100px;
		margin:0 auto;
		overflow:visible;
	}
	.faq-left h2,
	.faq-right h2{
		text-align:center;
		font-family: 'Open Sans', sans-serif;
		font-weight:400;
		text-shadow:2px 2px 2px #f4f4f4;
	}
	.faq-left{
		float:left;
		width:550px;
	}
	.faq-right{
		float:right;
		width:550px;
	}

	.faq-container{
		width:500px;
		margin:20px auto;
		list-style-type:none;
	}

Selanjutnya kita mulai mempercantik bagian label untuk pertanyaan

	.faq-container li{
		position:relative;
		margin:5px 0;
		-webkit-transition:height 1s ease in out;
		   -moz-transition:height 1s ease in out;
		        transition:height 1s ease in out;
	}
	.faq-container li input{
		display:none;
	}

	.faq-container li label{
		font-family: 'Open Sans', sans-serif;
		font-weight: 400;
		font-size: 16px;
		text-shadow: 1px 1px 1px #666;
		background: #333;
		background: -webkit-linear-gradient(top, #333 1%, #666 100%);
		background: -moz-linear-gradient(top, #333 1%, #666 100%);
		background: linear-gradient(top, #333 1%, #666 100%);
		color: #fff;
		display: block;
		padding: 10px;
		cursor: pointer;
		border-radius: 5px 5px 0 0;
	}
	.faq-container li label:hover{
		background: -webkit-linear-gradient(top, #333 30%, #666 100%);
		background: -moz-linear-gradient(top, #333 30%, #666 100%);
		background: linear-gradient(top, #333 30%, #666 100%);
	}

Setelah selesai dengan label pertanyaan, selanjutnya bagian jawaban

	.faq-container li div{
		overflow: hidden;
		height:0px;
		padding:5px 10px;
		background:#666;
		background: -webkit-linear-gradient(top, #666 1%, #333 100%);
		background: -moz-linear-gradient(top, #666 1%, #333 100%);
		background: linear-gradient(top, #666 1%, #333 100%);
		position: relative;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		border-radius:0 0 5px 5px;
		color:#f7f7f7;
		font-family: 'Open Sans', sans-serif;
		font-size:13px;
	}
	.faq-container li div p{margin-top:10px}
	.faq-container li input:checked{
		background:#000;
	}
	.faq-container li input:checked ~ div{
		padding-bottom:20px;
	}
	.faq-container li input:checked ~ div.answer{
		height:50px;
	}
	.faq-container li input:checked ~ div.big{
		height:110px;
	}

Dan hasil nya adalah seperti berikut ini

 

 

Sekian tutorial kali ini, semoga berguna untuk anda. Terima kasih sudah membaca
Jangan lupa Follow Twitter kami di @tut_web

Salam Web Design Indonesia :D





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

20 thoughts on “Mendesain Halaman FAQ Keren Dengan CSS3

  1. Sholihin says:

    Hasilnya bagus mas, keren pokoknya, ringan pula. FAQ itu Frequency Asked Questions apa Frequently mas? Apa sama saja?

  2. ebuh says:

    keren mas. baru tau bisa tanpa jquery

  3. Andreas Nanda says:

    mas saya ingin tanya, itu yang di radio button kan ada 4 label, yg di lebel ke3 kok seperti tidak jalan radio button nya yah? trs jadi ga sinkronisasi sama atas atau bawah nya.

    terima kasih

  4. Andreas Nanda says:

    mas saya mau tanya lg soal height dari faq nya.
    kalau mau dia mengikuti tinggi dari text nya gmn ya? saya coba pakai
    height:100%; hasilnya tidak terlalu baik
    apakah pengaruh dari float: left;? lalu bagaimana solusi yg baik untuk kolom penjelasan yg panjang agar tidak harus mengukur height secara manual, karena jika manual tinggi tiap pertanyaan berbeda beda. thanks

  5. arwasil says:

    Tips yang menarik mas TWD. Good read

  6. keren dan menarik.. nanti kapan kapan mau nyobain.. thanks.

  7. Tipsnya sangat menarik mas, Thanks..

  8. Aprino says:

    Mas, mau tanya. Saya kan memilih yang versi “checkbox” setelah saya pasang itu dia rata kiri. Untuk meratakan tengah saya biasanya menggunakan tapi yang berubah hanya text yang rata tengah. Maksud saya untuk meratakan “checkbox” bagaimana? Tanpa mengubah text didalamnya (jadi tetap rata kiri). Bisa?

  9. Aprino says:

    Mas, mau tanya. Saya kan memilih yang versi “checkbox” setelah saya pasang itu dia rata kiri. Untuk meratakan tengah saya biasanya menggunakan tapi yang berubah hanya text yang rata tengah. Maksud saya untuk meratakan “checkbox” bagaimana? Tanpa mengubah text didalamnya (jadi tetap rata kiri). Bisa?

    Thank’s Sebelumnya, Triknya bagus… Saya Follow untuk berlangganan :)

  10. Dheweb says:

    nice om, boleh nee d coba :)

  11. rofiqmedia says:

    gan klo bikin fanspage melayang kyak blog ini gimana ? tolong balas ke email saya klo boleh. makasih

  12. Tampilannya bagus mas, dan cukup lengkap ngejelasinnya.. makasih sudah berbagi

  13. fadhil says:

    Mas mau nanya nih…untuk memasukkan FAQ tersebugt ke website berbasis joomla bagaimana caranya ??

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development