Experimentando con las propiedades CSS3 avanzadas.

Saludos.
He dejado el blog de lado un tiempo, pero ahora estoy más liberado y van a caer artículos con más regularidad, y el de hoy, es especialmente bonito.

La evolución de la web nos lleva hacia aplicaciones cada vez más ricas y más interactivas, difuminando la barrera entre aplicaciones web y aplicaciones de escritorio, datos locales y en la nube, etc…
Pese a la fama y peso que está recibiendo en los medios el standard HTML5, aun en borrador, no son menos importantes las hojas de estilo.
Siendo consecuentes, las hojas de estilo son lo que hacen de una web llena de texto como un libro, una composición de formas, colores, secciones y, con CSS3, interacción también.
Es triste comprobar que, estando CSS3 desde aproximadamente el año 2005, aun los navegadores no suportan sus funciones todo lo que sería deseable.
Como es costumbre, webkit va a la cabeza, firefox le sigue a un distancia no demasiado grande, opera aproximadamente donde FF, y internet explorer, incluso en su versión 9, decepciona como siempre.

Las técnicas que voy a enseñar hoy no tienen mucha utilidad práctica, porque no funcionarían más que en los ordenadores de unos pocos geeks, pero conviene conocer, y porque no, dar publicidad a estas técnicas para hacer presión y que se implanten lo antes posible.

Voy a demostrar como hacer un slideshow de imágenes usando transformaciones y transiciones css. E incluso transformaciones 3D si el navegador las soporta.
Para esto ultimo, debeis tener instalado la ultima versión de webkit preferiblemente. La teneis disponible aquí.
Chrome/chromium beta, si activas la aceleración GPU (para ello hay que poner about:flags en la barra de direcciones y activar la opción), tiene un soporte parciar, aunque aun muestra alguna deficiencia en las animaciones.

Para las transformaciones en 2D y las transiciones, vale también con tener firefox 4 beta o opera 11. En el caso de firefox4, parece que las transiciones no se pueden aplicar a la propiedad transform, asi necesitaremos algo de JS para dar el pego.

Podeis encontrar todos los códigos de esta demo en mi repositorio de github

Vamos a empezar con un sencillísimo marcado. Crearemos un par de divs para encuadrar todo, y dentro pondremos unas cuantas “cartas” con un background colorido.

<div id="main" class="rounded-border wrapper">
    <div id="demo">
      <div id="slider">
        <div class="card rounded-border center" style="background:#f6f6f6 url('coverflow_images/dreamglow.jpg');"></div>
        <div class="card rounded-border right first" style="background:#f6f6f6 url('coverflow_images/dreamglow_flower.jpg');"></div>
        <div class="card rounded-border right" style="background:#f6f6f6 url('coverflow_images/OliBac.jpg');"></div>
        <div class="card rounded-border right" style="background:#f6f6f6 url('coverflow_images/OliBac_flower.jpg');"></div>
        <div class="card rounded-border right" style="background:#f6f6f6 url('coverflow_images/PinkSherbertPhotography_beadsNheart.jpg');"></div>
        <div class="card rounded-border right" style="background:#f6f6f6 url('coverflow_images/PinkSherbertPhotography_candy.jpg');"></div>
        <div class="card rounded-border right" style="background:#f6f6f6 url('coverflow_images/PinkSherbetPhotography.jpg');"></div>
        <div class="card rounded-border right" style="background:#f6f6f6 url('coverflow_images/ThomasShahan.jpg');"></div>
        <div class="card rounded-border right" style="background:#f6f6f6 url('coverflow_images/ViaMoi.jpg');"></div>
      </div>
    </div>
    <div class="right-text">All images are Creative Common</div>
  </div>

Y la magia ocurre en las hojas de estilo:

#demo { overflow: hidden; }
#slider{
  width: 1000%;
  padding-left: 320px;
  -moz-transition-property:     margin;
  -webkit-transition-property:  margin;
  transition-property:          margin;
  -moz-transition-duration:     1s;
  -webkit-transition-duration:  1s;
  -o-transition-duration:       1s;
  transition-duration:          1s;
}
.card {
  box-shadow:         #aaa 0 0 7px;
  -webkit-box-shadow: #aaa 0 0 7px;
  -moz-box-shadow:    #aaa 0 0 7px;
  -o-box-shadow:      #aaa 0 0 7px;
  float: left;
  width: 300px;
  height: 300px;
  background: white;
  margin: 10px -85px;
  -moz-transition-property:     margin,transform,opacity;
  -webkit-transition-property:  margin,transform,opacity;
  transition-property:          margin,transform,opacity;
  -moz-transition-duration:     1s;
  -webkit-transition-duration:  1s;
  -o-transition-duration:       1s;
  transition-duration:          1s;
}
.card.left, .card.right { opacity: 0.07; }
.card.left.first, .card.right.first { opacity: 0.6; }
.card{ margin: 10px -110px; }
    .card.left {
      -moz-transform: perspective(500) rotateY(65deg) scale(0.65);
      -webkit-transform: perspective(500) rotateY(65deg) scale(0.65);
      -o-transform: perspective(500) rotateY(65deg) scale(0.65);
      -ms-transform: perspective(500) rotateY(65deg) scale(0.65);
      -khtml-transform: perspective(500) rotateY(65deg) scale(0.65);
      transform: perspective(500) rotateY(65deg) scale(0.65);
    }
    .card.right {
      -moz-transform: perspective(500) rotateY(-65deg) scale(0.65);
      -webkit-transform: perspective(500) rotateY(-65deg) scale(0.65);
      -o-transform: perspective(500) rotateY(-65deg) scale(0.65);
      -ms-transform: perspective(500) rotateY(-65deg) scale(0.65);
      -khtml-transform: perspective(500) rotateY(-65deg) scale(0.65);
      transform: perspective(500) rotateY(-65deg) scale(0.65);
    }
    .card.center{ margin: 10px 5px; }

En resumen, metro un div muy ancho dentro de otro más estrecho, y lo que sobresalga se hace invisible.
Las cartas pueden o bien ser la que estamos visionando(centro) o bien quedar a si izq o derecha. Las que estén a los lados, estarán deformadas en 3d.
Y hago que las propiedades margen, transform y opacity se animen con suavidad. Lo bueno de usar transiciones es que el código javascript se te simplifica anormemente, porque toda la información relativa a la animación queda dentro de las hojas de estilo, y en el javascript, tan solo cambias un par de clases.
En este caso salvamos el tema con media docena de lineas.

    $(function(){
      $(".csstransforms3d .card").click(function(){
        $(this).prevAll(".card").addClass('left').removeClass('right center first');
        $(this).nextAll(".card").addClass('right').removeClass('left center first');
        $(this).prev(".card").addClass('first');
        $(this).next(".card").addClass('first');
        $(this).removeClass('left right').addClass('center');
        $(this).closest("#slider").css('margin-left', ($(this).prevAll(".card").length*-80)+'px');
      });
    });

Podeis ver un ejemplo aqui
Si preferís verlo en video, podeis verlo en youtube:

En la siguiente entrega vamos a ver como hacer con navegadores que no soporten transformaciones 3D para lograr efecto 3D isomético que da el pego bastante bien.

Un saludo, y happy coding

Anuncios

, , , ,

  1. Deja un comentario

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: