Setelah beberapa hari disibukan dengan berbagai persiapan menjelang event tahun baru ditambah lagi jaringan speedy yang kena amukan bus akhirnya punya sedikit waktu untuk kembali berbagi sebuah tutorial sederhana , yaitu membuat sebuah tabbed content ( tulisan ) yang sederhana dengan CSS3. Tapi memang tidak sesederhana itu karena tabbed ini memiliki fitur responsive dan lihat demonya hehehe ...
CSS3
.tabs {
position: relative;
font: normal normal 400 0
'Electrolize', Helvetica, Arial, sans-serif;
color: #fff
}
.tabs input {display: none}
.tabs label {
position: relative;
z-index: 1;
display: inline-block;
width: 25%; /* 4 TABS = 100/4 = 25% */
box-sizing: border-box;
border: 1px solid #222;
border-left-color: #555;
font-size: 17px;
line-height: 45px;
cursor: pointer;
user-select: none
}
.tabs label span {
display: block;
padding: 5px;
background: #444
}
.tabs label span span {
padding: 0 20px;
background: transparent;
border-radius: 3px;
transition: background 0.4s
}
.tabs label:hover span span {background: #39a1dd}
.tabs input:checked + label {cursor: default}
.tabs input:checked + label span span {
background: #39a1dd
}
.tabs ul {
list-style: none;
position: relative;
display: block;
font: normal normal 400 15px
'Roboto', Helvetica, Arial, sans-serif
}
.tabs ul li {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: auto;
padding: 25px;
background: #444;
box-sizing: border-box;
opacity: 0;
transition: all .4s;
border-top: 1px solid #666;
border-right: 1px solid #222
}
.tabs > .content1:checked ~ ul > .content1,
.tabs > .content2:checked ~ ul > .content2,
.tabs > .content3:checked ~ ul > .content3,
.tabs > .content4:checked ~ ul > .content4 {
/* ADD MORE AS NEEDED */
position: relative;
z-index: 1;
opacity: 1;
transform: none
}
/* RESPONSIVE STACKING */
@media screen and (max-width: 780px) {
.tabs label {
display: block;
width: 100%;
border: 0;
padding-right: 0;
padding-left: 0;
text-align: left
}
.tabs ul {
margin-top: 0;
margin-right: 0;
margin-left: 0
}
}
/* FONTAWESOME */
.fa {
margin-right: 10px;
font-size: 20px;
/* vertical-align: middle */ /* FONT SIZE 20+ */
}
/* A SAMPLE EFFECT - SLIDE DOWN */
.tabs ul li {transform: translateY(30px)}
/* RANDOM STUFF FOR THE PAGE */
.center { display: table; margin: 0 auto }
.italic {
color: #fff;
font: italic normal 400 14px
Helvetica, Arial, sans-serif;
margin-bottom: 20px;
display: inline-block
}
.italic:before, .italic:after {
content: '_';
position: relative;
color: #3cf;
top: -7px;
margin: 10px
}
::selection {
background: transparent;
color: #3cf
}
::-webkit-scrollbar { display: none }
HTML costumize
<div class="tabs">
<!--TAB 1-->
<input type="radio" name="tabs" checked id="tab1" class="content1">
<label for="tab1">
<span>
<span><div class="fa fa-home"></div>Tab 1
</span>
</span>
</label>
<!--TAB 2-->
................
Tabbed Selanjutnya ....
</div>
Selebihnya silahkan kreasikan sendiri .
Resource : JustAnotherCoder
pertamax sob
BalasHapusini bisa ane praktekkan di gubuk ane ga sob, seperti yang sob blg tinggal desain sedikit maka jd tu template gubuk ane, hehehehe
thanks
bisa dong tinggal dipasang aja hee
Hapusmantaaaaaap kang ... :) masang kode nya dimana kang ? ... dipostingan atau harus edit template hehee
BalasHapusdipostingan juga bisa kang .. kalau di edit html css diatas ]]></b:skin> dan kode html mah bebas kang dimana akang suka hehe
Hapuswah si akang cerdas pisan euy.. gak kepikiran bakal bikin kayak gini haha.. nice kang :-bd
BalasHapushaha ... lumayan lah
Hapusada yg pake css target lebih mudah.
BalasHapussebenarnya ini bisa dibikin lebih .. bukan sekedar untuk tabbed sob
Hapuslebih nya apa ??
Hapusada yg pake css target lebih mudah.
BalasHapusMakin hari makin keren aja sih kang :)
BalasHapusaku jadi tersanjung mas bud wkwkwkwk
Hapuskeren , bermanfaat sekali gan .
BalasHapuskunjungan perdana , izin follow ,
silahkan sob ....
HapusKeren kang... sepertinya cocok di simpen dina potingan nya kang... hmmm...kanggo ngawadahan naon nya? hoyong nyiboan bingung eusina...
BalasHapusMangga kang eusian kunaon we asal ulah ku beas hahaha
Hapus