CSS3 Sliding Panels

Sliding Panels dengan CSS3 ini dapat menampilkan suatu efek panel gambar yang dapat bergeser. Idenya adalah dengan menggunakan gambar latar belakang untuk panel dan menghidupkan mereka ketika mengklik pada label. kita dapat menggunakan tombol radio dengan label dan menargetkan panel masing-masing dengan general sibling selector.

ini sebenarnya merupakan cara lain untuk menciptakan slideshow dengan berbagai efek tambahan menggunakan CSS3. Dikutip dari vagabundia

Demo

The Markup

HTML akan terdiri dari tiga bagian utama: tombol radio, label (wadah panel tempat"irisan" untuk setiap bagian gambar) dan judul. Wadah dengan bagian class cr-bgimg akan memiliki divisi untuk masing-masing panel dan di dalam nya kita akan menempatkan rentang untuk setiap gambar dengan posisi latar belakang yang tepat.

Jadi, panel pertama akan memiliki empat potong, masing-masing memiliki salah satu gambar sebagai latar belakang dengan posisi paling kiri. Panel kedua akan memiliki lagi empat potong tapi sekarang posisi background akan dipindahkan untuk menunjukkan bagian selanjutnya dari masing-masing gambar:

<div class="cr-container">
  <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
  <label for="select-img-1" class="cr-label-img-1">1</label>
  <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
  <label for="select-img-2" class="cr-label-img-2">2</label>
  <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
  <label for="select-img-3" class="cr-label-img-3">3</label>
  <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
  <label for="select-img-4" class="cr-label-img-4">4</label><div class="clr">
</div>
<div class="cr-bgimg">
  <div>
    <span>Slice 1 - Image 1</span>
    <span>Slice 1 - Image 2</span>
    <span>Slice 1 - Image 3</span>
    <span>Slice 1 - Image 4</span>
  </div>
  <div>
    <span>Slice 2 - Image 1</span>
    <span>Slice 2 - Image 2</span>
    <span>Slice 2 - Image 3</span>
    <span>Slice 2 - Image 4</span>
  </div>
  <div>
    <span>Slice 3 - Image 1</span>
    <span>Slice 3 - Image 2</span>
    <span>Slice 3 - Image 3</span>
    <span>Slice 3 - Image 4</span>
  </div>
  <div>
    <span>Slice 4 - Image 1</span>
    <span>Slice 4 - Image 2</span>
    <span>Slice 4 - Image 3</span>
    <span>Slice 4 - Image 4</span>
  </div>
  </div>
  <div class="cr-titles">
    <h3>
      <span class="big"> titulo panel 1 </span>
      <span class="small"> texto inferior panel 1 s</span>
    </h3>
    <h3>
      <span class="big"> titulo panel 2 </span>
      <span class="small"> texto inferior panel 2 </span>
    </h3>
    <h3>
      <span class="big"> titulo panel 3 </span>
      <span class="small"> texto inferior panel 3 </span>
    </h3>
    <h3>
      <span class="big"> titulo panel 4 </span>
      <span class="small"> texto inferior panel 4 </span>
    </h3>
  </div>
</div>

The CSS

Dalam hal ini pertama-tama kita akan menyembunyikan tombol-tombol radio dengan menutupi nya dengan label. Dengan memberikan ID untuk input, kita dapat menggunakan = idref attribute dari label untuk referensi masukan masing-masing.

Kedua, kita akan menempatkan semua gambar latar belakang dengan benar dan ketiga, kita ingin menampilkan masing-masing potongan gambar dan judul saat mengklik label.

<style>
  .cr-container { /* el contenedor */
    border: 10px solid #FFF;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 600px;
  }
  .cr-container br {display:none;}
  .cr-container label { /* la navegación inferior */
    color: #98541C;
    cursor: pointer;
    float: left;
    font-size: 30px;
    height: 32px;
    line-height: 30px;
    margin-top: 350px;
    position: relative;
    text-align: center;
    width: 150px;
    z-index: 1000;
  }
  .cr-container label:before {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
    content: "";
    height: 32px;
    left: 50%;
    margin-left: -16px;
    position: absolute;
    width: 32px;
    z-index: -1;
  }
  .cr-container label:after { /* una línea vertical que separa los paneles */
    background: -moz-linear-gradient(#FFF,#000,#FFF);
    background: -webkit-linear-gradient(#FFF,#000,#FFF);
    background: linear--linear-gradient(#FFF,#000,#FFF);
    bottom: -20px;
    content: '';
    height: 400px;
    position: absolute;
    right: 0px;
    width: 1px;
  }
  .cr-container label.cr-label-img-4:after { width: 0px; }
  .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
  .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
  .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
  .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
    color: #000;
  }
  .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
  .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
  .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
  .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
    background: #FFF;
    box-shadow: 0 0 0 4px rgba(0,0,0, 0.5);
  }
  .cr-container input { display: none; }

  /* las imagenes son fondos */
  .cr-bgimg {
    background-repeat: no-repeat;
     background-position: 0 0;
    height: 400px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 600px;
    z-index: 1;
  }
  .cr-bgimg div {
    background-repeat: no-repeat;
    float: left;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 150px;
  }
  .cr-bgimg div span {
    height: 100%;
    left: 150px;
    position: absolute;
    text-indent: -9000px;
    top: 0px;
    width: 100%;
    z-index: 2;
  }
  .cr-bgimg div:nth-child(odd) span { left: -150px; }

  /* cada una de ellas */
  .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(1) { background-image: url(URL_IMAGEN_1); }
  .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(2) { background-image: url(URL_IMAGEN_2); }
  .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(3) { background-image: url(URL_IMAGEN_3); }
  .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(4) { background-image: url(URL_IMAGEN_4); }
  /* los panales tiene 150 pixeles de ancho */
  .cr-bgimg div:nth-child(1) span { background-position: 0px 0px; }
  .cr-bgimg div:nth-child(2) span { background-position: -150px 0px; }
  .cr-bgimg div:nth-child(3) span { background-position: -300px 0px; }
  .cr-bgimg div:nth-child(4) span { background-position: -450px 0px; }

  /* las animaciones */
  .cr-container input:checked ~ .cr-bgimg div span {
    -moz-animation: slideOutRight 0.6s ease-in-out;
    -webkit-animation: slideOutRight 0.6s ease-in-out;
  }
  @-webkit-keyframes slideOutRight{
    0%{ left: 0px; }
    100%{ left: 150px; }
  }
  @-moz-keyframes slideOutRight{
    0%{ left: 0px; }
    100%{ left: 150px; }
  }
  .cr-container input:checked ~ .cr-bgimg div:nth-child(even) span {
    -moz-animation: slideOutLeft 0.6s ease-in-out;
    -webkit-animation: slideOutLeft 0.6s ease-in-out;
    animation: slideOutLeft 0.6s ease-in-out;
  }
  @-webkit-keyframes slideOutLeft{
    0%{ left: 0px; }
    100%{ left: -150px; }
  }
  @-moz-keyframes slideOutLeft{
    0%{ left: 0px; }
    100%{ left: -150px; }
  }
  .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
  .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
  .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
  .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) {
    -moz-transition: left 0.5s ease-in-out;
    -webkit-transition: left 0.5s ease-in-out;
    transition: left 0.5s ease-in-out;
    -moz-animation: none;
    -webkit-animation: none;
    animation: none;
    left: 0px;
    z-index: 10;
  }

  /* los textos en geenral */
  .cr-titles h3 { font-weight: normal; }
  .cr-titles h3 span {
    left: 0px;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    z-index: 10000;
  }
  /* el texto superior más grande */
  .cr-titles h3 span.big {
    color: #FFF;
    font-family: Helvetica;
    font-size: 60px;
   left: 0px;
    letter-spacing: -2px;
    text-shadow: 1px 2px 1px #000;
    top: 230px;
    -moz-transition: opacity 0.8s ease-in-out, -moz-transform 0.8s ease-in-out;
    -webkit-transition: opacity 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
  }
  /* el texto inferior más pequeño */
  .cr-titles h3 span.small {
    background: rgba(255, 255, 255, 0.7);
    color: #000;
    font-family: Tahoma;
    font-size: 14px;
    letter-spacing: 0;
    margin-top: 100px;
    opacity: 0;
    padding: 5px 0;
    text-shadow: 1px 1px 1px #FFF;
    -moz-transition: opacity 0.8s ease-in-out;
    -webkit-transition: opacity 0.8s ease-in-out;
    transition: opacity 0.8s ease-in-out;
  }

  /* animaciones de los textos */
  .cr-container input:checked ~ .cr-titles h3 span:nth-child(1) {
    opacity: 0;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
  .cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
  .cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
  .cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1) {
    opacity: 1;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
  .cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
  .cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
  .cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
     opacity: 1;
  }
</style>