Puedes configurar tus cards como desees, solo tienes que tener en cuenta la construcción de la estructura y por supuesto las clases.
En las imágenes de abajo se muestra la estructura de como van organizados los elementos y el código CSS para realizar esta animación.
En la imagen que se muestra de la estructura solo mostramos la correspondiente a dos cards, puedes añadir los que desees o incluso utilizar uno solo.
Observa como hay un contenedor(div) que es el primero de los que conforman el elemento Column (esto es opcional y depnderá del diseño), dentro de este hay otro div al que renombramos como card-primaria, se ha renombrado así para que coincida con el nombre de la clase para mallor claridad, por cada card y dentro de este segundo div renombrado a "card-primario" otros dos divs, el renombrado a "car-frontal" es el que aparecerá por defecto desapareciendo cuando el puntero del mouse se ponga encima y dando paso al segundo div el llamado "card-posterior", puedes renombrarlos, o no, como quieras, este solo es para facilitar la explicación.
Así, dentro del card-primario y del secundario puedes meter lo que te convenga para tu diseño, no hay nada mas que tener en cuenta.
Lo siguiente será añadir un elemento Code-Bolck en que se pegará el código que abajo se muestra, también puedes pegarlo en una hoja de estilos, aunque somos mas partidarios de poner en un Code-Block todos los códigos que no sea vayan a utlizar en múltiples páginas, de esta manera solo se cargará en la página en la que utilices los cards y no influirá en la velocidad y rendimiento de manera generalizada en las otras páginas del sito.
.card-primaria {
position: relative;
}
.card-frontal,
.card-posterior {
transition: 1s all ease-in-out;
backface-visibility: hidden;
}
.card-frontal {
transform: rotateY(0deg);
transform-style: preserve-3d;
}
body:not(.ng-scope) .card-posterior {
position: absolute;
transform: rotateY(180deg);
transform-style: preserve-3d;
}
body:not(.ng-scope) .card-primaria:hover .card-frontal {
transform: rotateY(-180deg);
}
body:not(.ng-scope) .card-primaria:hover .card-posterior {
transform: rotateY(0deg);
}
¿Que es lo que se puede personalizar del código?
Solo se debería, en caso que lo quisieras, cambiar los parámatros que están señalados en verde y corresponden a la línea 7 del código CSS: 1s all ease-in-out;
duración de la transition: cambiando el tiempo, por ejemplo para que el efecto se produzca de forma mas rápida cambiar el 1 por 0.5 o bien por 1.5 para que se tome mas tiempo durante la ejecución del efecto.
- el transition-timming-function: efecto de la velocidad con la que se desarralla la transición de un estado a otro: mas info aqui.
Por supuesto, puedes, y debes, cambiar los nombres de las clases si no coinciden las tuyas con las del código.
El diseño fluido se refiere a un enfoque de diseño web en el que las dimensiones de los elementos son flexibles, escalando proporcionalmente al tamaño de la pantalla del usuario.
En lugar de medidas fijas de píxeles, utiliza unidades relativas como porcentajes o ems para garantizar que el diseño se ajuste sin problemas, independientemente del dispositivo.
Mostramos como añadir más iconos sin la necesidad de añadir más sets de SVGs, usando la fuente denominada "vanilla" y con la particularidad de que vamos a poder usarlos de manera global en todo nuestro sitio o solo en aquellas páginas o entradas en las que sea necesario.
La diferencia entre usarlos de manera global en todo el sitio o solo en aquellas páginas está en que en la primera manera cargaremos los kb de la fuente, en este caso 79Kb de manera innecesaria en aquellas páginas o entradas donde no requiramos el uso de estos iconos.
Un pequeño tip para lograr un efecto de subrayado animado con css y Oxygen
