Membuat Pure CSS Tabs untuk Blogger

Membuat Pure CSS Tabs untuk Blogger

Rio Ilham Hadi

05 January 2015

Pure CSS Tabs - Halo sobat Blanter semua, sudah lebih dari seminggu tidak update tutorial, karena paket modem habis. Kali ini saya akan memberikan tips/tutorial yang gak kalah menarik dari tutorial sebelumnya. "Auto Select Filters" Tutorial kali ini bernama "Pure CSS Tabs".

Apa Itu Pure CSS Tabs? - Pure CSS Tabs adalah suatu Style Teks, yang bertipe Tabs, Jika Tabs Diklik maka akan memunculkan Teks, dan Tabs Lainnya akan memunculkan teks yang berbeda, Pure CSS Tabs ini bukan hanya untuk Teks, tapi bisa juga untuk gambar, untuk lebih jelasnya silahkan lihat demo di bawah ini.

Demo

Jika sobat tertarik untuk mencobanya, silahkan ikuti tutorial di bawah ini.

Langkah Pertama Adalah HTML, Letakan HTML di tempat yang sobat inginkan.

 <section class="tabs-frame">
  <article class="tab">
    <input type="radio" id="tab_1" class="radio" name="tab_group_1" />
    <label for="tab_1" class="tab-button"></label>
    <section id="tab_frame_1" class="tab-frame">
      <p>...TAB 1 CONTENT...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_2" class="radio" name="tab_group_1" />
    <label for="tab_2" class="tab-button"></label>
    <section id="tab_frame_2" class="tab-frame">
      <p>...TAB 2 CONTENT...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_3" class="radio" name="tab_group_1" checked />
    <label for="tab_3" class="tab-button"></label>
    <section id="tab_frame_3" class="tab-frame">
      <p>...TAB 3 CONTENT...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_4" class="radio" name="tab_group_1" />
    <label for="tab_4" class="tab-button"></label>
    <section id="tab_frame_4" class="tab-frame">
      <p>...TAB 4 CONTENT...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_5" class="radio" name="tab_group_1" />
    <label for="tab_5" class="tab-button"></label>
    <section id="tab_frame_5" class="tab-frame">
      <p>...TAB 5 CONTENT...</p>
    </section>
  </article>
</section> 

Langkah Selanjutnya adalah CSS (Style), Letakan CSS di atas ]]></b:skin> atau </style>

 /* Frame */
.tabs-frame {
    position: absolute;
    top: -25%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 250px;
    height: 50px;
    margin: auto;
    display: block;
}
/* Tabs */
.tabs-frame .tab {
    position: relative;
    float: left;
    width: 50px;
    height: 50px;
    display: block;
}
/* Tabs Radio */
.tabs-frame .tab .radio {
    display: none;
}

.tabs-frame .tab .tab-button {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 15px;
    height: 15px;
    margin: auto;
    border-radius: 100%;
    border: 0 double #fff;
    background: #fafafa;
    display: block;
    -webkit-transition: .15s linear;
}

.tabs-frame .tab .radio:checked + .tab-button {
    border: 6px double #d4d9e1;
    background: #fc6e51;
}

.tabs-frame .tab .tab-button:hover {
    background: #fc6e51;
}

/* Tabs Frame */
.tabs-frame .tab .tab-frame {
    position: absolute;
    top: 100%;
    left: -126px;
    width: 300px;
    border-radius: 5px;
    background: #fff;
    display: block;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    text-align: left;
    line-height: normal;
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .3);
    -webkit-transition: opacity .3s linear,
    -webkit-transform .3s linear;
    -webkit-transform: translate(0, -10%);
}

.tabs-frame .tab .tab-frame:before {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    margin: auto;
    border-width: 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent #fff;
    display: block;
}

.tabs-frame .tab .radio:checked ~ .tab-button ~ .tab-frame {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    -webkit-transform: translate(0, 0);
}

.tabs-frame .tab .tab-frame p {
    padding: 0 20px;
    margin: 20px 0;
} 

Lalu Simpan Template dan Lihat Hasilnya... :)

Semoga Tutorial Ini bermanfaat... dan Tunggu Update selanjutnya..

Source : twistedshape.blogspot.com/2015/01/pure-css-tabs.html

Share This