Mengangkat kembali tutorial membuat tab view content! Sudah ada beberapa artikel membahas
tab view di blog gue, dari yang level ecek-ecek sampai level expert :p Yuk kita tour dulu
Itulah beberapa postingan tutorial tentang membuat tab-view. Koben akan berbagi lagi tut's serupa dengan menggunakan teknik syntax
input html tag dan atribut CSS3
nth-child(). Uniknya lagi judul main tab views yang sekarang berada di bawah bukan di atas pada umumnya!
.slides {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
border-radius: 5px;
background: #999;
border: 1px solid #333;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.content {
position: absolute;
width: 100%;
top: 0;
color: #fff;
opacity: 0;
padding: 0 10px;
text-shadow: 1px 2px 3px #000;
transform: translateY(-100%);
transition: transform .5s ease-out, opacity 1s ease-out;
}
input[type=radio] {
display: none;
}
.tvcss {
display: block;
position: absolute;
bottom: 0;
line-height: 3em;
width: 25%;
text-align: center;
cursor: pointer;
font-size: .8em;
z-index: 50;
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
font-weight: bold;
background: #111;
}
.slide:nth-child(2) .tvcss {
margin-left: 25%;
}
.slide:nth-child(3) .tvcss {
margin-left: 50%;
}
.slide:nth-child(4) .tvcss {
margin-left: 75%;
}
input[type=radio]:checked ~ .content {
transform: translateX(0);
opacity: 1;
}
input[type=radio]:checked + .tvcss {
background: #fff;
color: #111;
}
.content h2 {
color: red;
}
<div class="slides">
<div class="slide">
<input type="radio" name="slideshow" id="slide1">
<label class="tvcss" for="slide1">TTITLE</label>
<div class="content">
<h2>TTITLE</h2>
-------- BLAH BLEH BLOH HERE --------
</div>
</div>
<div class="slide">
<input type="radio" name="slideshow" id="slide2">
<label class="tvcss" for="slide2">TTITLE</label>
<div class="content">
<h2>TTITLE</h2>
-------- BLAH BLEH BLOH HERE --------
</div>
</div>
<div class="slide">
<input type="radio" name="slideshow" id="slide3">
<label class="tvcss" for="slide3">TTITLE</label>
<div class="content">
<h2>TTITLE</h2>
-------- BLAH BLEH BLOH HERE --------
</div>
</div>
<div class="slide">
<input type="radio" name="slideshow" id="slide4">
<label class="tvcss" for="slide4">TTITLE</label>
<div class="content">
<h2>TTITLE</h2>
-------- BLAH BLEH BLOH HERE --------
</div>
</div>
</div>
Option
Jika sobat mau menambahkan kolom konten, berarti harus edit dan menambahkan kode berikut pada sesi CSS.slide:nth-child(2) .tvcss{
margin-left:25%;
}Begitu juga dengan markup HTML, UNIQUE-ID harus berbeda.<div class="slide">
<input type="radio" name="slideshow" id="UNIQUE-ID">
<label class="tvcss" for="slide3">TITLE</label>
<div class="content">
<h2>TITLE</h2>
-------- BLAH BLEH BLOH HERE --------
</div>
</div>Good luck :)
cssdeck.com/labs/pxgbxrlj
Happy coding \m/
