En este nuevo capítulo de ¿Cómo se hizo?, voy a hablar del proceso de creación de la página del portafolio.
Esta página me ha sido bastante sencilla de hacer ya que cómo podréis ver he reutilizado código que he encontrado y un plugin de jQuery: Quicksand. Este plugin permite filtrar y ordenar una serie de elementos con efectos visuales muy bonitos. Además, para conseguir el efecto 3D de girar las «tarjetas» de proyectos, sólo he utilizado HTML5 y CSS3.
Efecto rollover en 3D
Para conseguir este efecto, he seguido los pasos del siguiente ejemplo. El tercer ejemplo «Flat» es el que he utilizado y modificado para hacer la página de mi portafolio. Voy a ir paso a paso explicando qué hace cada porción de código.
Este es el HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!-- Lista de proyectos. --> <ul class="proyectos-lista"> <!-- Tarjeta de un proyecto. --> <li class="proyecto-tarjeta"> <!-- Parte frontal de la tarjeta. --> <div class="proyecto-front"> <h2 class="proyecto-nombre">App Helptrainer</h2> <div class="proyecto-img"> <img src="img/logo_helptrainer.jpg" alt="App Helptrainer" /> </div> </div> <!-- Fin de la parte frontal de la tarjeta. --> <!-- Parte trasera de la tarjeta. --> <div class="proyecto-back"> <h2 class="proyecto-nombre">App Helptrainer</h2> <div class="proyecto-descripcion">Aplicación para iPhone de la web <a href="http://www.helptrainer.com">Helptrainer</a>. Disponible sólo para atletas, permite realizar entrenamientos y estar al tanto de tu planificación de entrenamiento y dieta.</div> <div class="proyecto-tech"> <a href="#ios" title="iOS" rel="tag">iOS</a> </div> <div class="proyecto-links"> <a class="button-link" title="App HelpTrainer" href="https://itunes.apple.com/us/app/helptrainer/id660168176?l=es&mt=8&ign-mpt=uo%3D4" target="_blank">Descargar app</a> </div> </div> <!-- Fin de la parte trasera de la tarjeta --></li> <!-- Fin de la tarjeta de un proyecto. --></ul> <!-- Fin de la lista de proyectos. --> |
Este HTML está compuesto de una lista desordenada «ul«. Cada elemento de esa lista será una tarjeta de un proyecto: «proyecto-tarjeta«. Cada tarjeta está compuesta por dos partes: una parte frontal («proyecto-front«) y una parte trasera («proyecto-back«).
Antes de nada, debemos aplicar perpectiva a la lista de proyectos para poder usar transformaciones en 3D. Lo mejor es que os leáis este artículo que explica perfectamente la razón de ser del siguiente css.
|
1 2 3 4 5 6 7 |
.proyectos-lista { -webkit-perspective: 1200; -moz-perspective: 1200; -ms-perspective: 1200; -o-perspective: 1200; perspective: 1200; } |
El siguiente código se encargará de proporcionar las instrucciones necesarias al div «proyecto-tarjeta«.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.proyectos-lista .proyecto-tarjeta { display: block; position: relative; width: 298px; height: 300px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: 1s linear; -moz-transition: 1s linear; -o-transition: 1s linear; -ms-transition: 1s linear; transition: 1s linear; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } /* Hover. */ .proyectos-lista .proyecto-tarjeta:hover { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } |
La instrucción transform-style: preserve-3d indica que el div debe conservar su posición 3D. De esta forma, al girar con la instrucción rotate que le aplicamos al hacer «hover«, el div permanecerá en la misma posición 3D y no girará. Eso nos dará el efecto deseado. Por último, la transición utilizada será de 1 segundo y lineal. Esto se aplicará al realizar la rotación de la tarjeta.
Ahora lo que debemos hacer es aplicar el css a la parte frontal y trasera para que al girar la tarjeta, se intercambien los contenidos que deben de ser visibles.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
.proyectos-lista .proyecto-tarjeta .proyecto-front { background: #fff; position: absolute; z-index: 10; width: 298px; height: 300px; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } /* Hover. */ .proyectos-lista .proyecto-tarjeta:hover .proyecto-front { z-index: 1; } .proyectos-lista .proyecto-tarjeta .proyecto-back { background: #fff; position: absolute; z-index: 1; width: 298px; height: 300px; -webkit-transform: translateZ(0) rotateY(180deg); -moz-transform: translateZ(0) rotateY(180deg); -ms-transform: translateZ(0) rotateY(180deg); -o-transform: translateZ(0) rotateY(180deg); transform: translateZ(0) rotateY(180deg); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } /* Hover. */ .proyectos-lista .proyecto-tarjeta:hover .proyecto-back { z-index: 10; } |
En este código debemos de observar sobre todo el «z-index«. Esta propiedad es mayor en el caso de la parte frontal (10) y menor en la parte trasera (1), pero cuando el ratón está encima de la tarjeta (hover), estos valores se invierten. Esto significa que al principio la parte frontal está colocada por encima de la parte trasera porque tiene mayor peso z-index, pero cuando pasamos el ratón por encima, esto se invierte y la parte trasera pasa a ser la que tiene mayor peso.
Otra propiedad digna de mención es «transform» en el caso de la parte trasera. En este caso le aplicamos una rotación de 180 grados, esto es porque al girar la tarjeta ya le estamos aplicando una rotación de 180 grados, por lo tanto si lo dejáramos tal cual, veríamos la parte trasera o sea la cara oculta, un fondo blanco. Al aplicar una rotación de 180 grados inicialmente, cuando la tarjeta se gire, veremos la parte trasera correctamente.
Por último, la propiedad «backface-visibility» nos permite indicar que la cara oculta de un div debe permanecer oculta. Si no usamos esta instrucción, al girar la tarjeta, veremos durante un lapso de tiempo (hasta que la otra cara ocupe su lugar) el contenido de la parte que esté girando.
Con este código, podréis conseguir el mismo efecto de mi portafolio. Os recomiendo también este tutorial en el que está todo muy bien explicado. En la siguiente parte, explicaré cómo utilizar el plugin Quicksand para el filtro que utilizo.
Os dejo un enlace con una demostración como siempre: VER DEMO
Ya está publicada la segunda parte del tutorial.
