Paneles deslizantes con CSS

Esto que llaman paneles deslizantes es, en realidad, otra forma de crear un slideshow con textos añadidos y efectos varios, desarrollado por codrops y que hace uso extremo del CSS3.

Tal vez pueda ser un poco engorroso pero los resultados son interesantes y hay varios demos 1, 2, 3, 4, que difieren en las animaciones porque, esencialmente, tienen la misma estructura.

Sólo muestro las variantes de uno de ellos que, por supuesto, no será visible en Internet Explorer. El HTML es el siguiente:

<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>

Si esto les parece muy largo ... ni miren el CSS.

<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>

1234

Slice 1 - Image 1Slice 1 - Image 2Slice 1 - Image 3Slice 1 - Image 4

Slice 2 - Image 1Slice 2 - Image 2Slice 2 - Image 3Slice 2 - Image 4

Slice 3 - Image 1Slice 3 - Image 2Slice 3 - Image 3Slice 3 - Image 4

Slice 4 - Image 1Slice 4 - Image 2Slice 4 - Image 3Slice 4 - Image 4

esta es la imagenUn ejemplo de paneles deslizantes

algunos efectosLorem ipsum dolor sit amet, consectetuer adipiscing elit.

usando CSS3wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

personalizabledefiniendo estilos para cada panel