Slider con bordes sesgados y transición animada 9.11.12
Slider con bordes sesgados (oblicuos) y una pizca de animación al cambiar los tamaños de sus imágenes. Puro Css.
Slider con bordes sesgados y transición animada
Un pequeño ejercicio y juego con css. Un slaider con los bordes de sus imágenes en oblicuo y una pizca de animación para mostrarlas al :hover.
Más sencillo de lo que pueda parecer. Sólo es cuestión de utilizar el valor skew de las propiedades del grupo de las transform y una pizca de animation para hacer las transiciones más suaves.
Y para que sepas qué es lo que quiero decir, esta vez el resultado primero:
El marcado html
Un simple contenedor general y cuatro interiores para alojar la imagen y si lo deseas otros elementos de cada cuadro del slider:
<div id="slider-k">
<div class="frame-k">
<img src="ruta.ext" alt="" />
</div>
<div class="frame-k">
<img src="ruta.ext" alt="" />
</div>
<div class="frame-k">
<img src="ruta.ext" alt="" />
</div>
<div class="frame-k">
<img src="ruta.ext" alt="" />
</div>
</div>
El Css asociado
Vamos paso a paso con una pequeña explicación de las declaraciones más significativas para los menos duchos. Me ahorro transcribir todo los prefijos privativos, pero ya sabes que ahí están. Tampoco voy a enlazar a los artículos del blog donde explico cada una de las propiedades utilizadas. Si tienes duda con alguna o quieres ampliar conocimientos usa el buscador del lateral.
Lo primero, definir el contenedor general #slider-k:
#slider-k {
background: #fff;
width: 600px;
height: 300px;
margin: 50px auto;
overflow: hidden;
border-radius: .5rem;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
Definimos un tamaño, lo centramos y evitamos que sus hijos desborden (se vean por fuera) sus límites con overflow.
El resto son puro adorno.
A continuación cada uno de los frames o cuadros ocupando su parte, con el borde izquierdo blanco para que resalte, dos cosillas más como adornos y la declaración de la transición que nos vendrá de perlas al final:
#slider-k .frame-k {
box-sizing: border-box;
width: 25%;
height: 100%;
float: left;
overflow: hidden;
border-left: 10px solid #fff;
pointer: cursor;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.9);
transform: skewX(-20deg);
transition: width 1.2s ease-in-out;
}
El resultado obtenido sería el de la imagen:
Hemos conseguido lo más difícil, ya tenemos los bordes oblicuos. Pero al girar los cuadros con transform: skewX(-20deg); tenemos un espacio sin cubrir en el contenedor padre en las esquinas superior-izquierda e inferior-derecha.
Para cubrirlo aumentamos un poco la anchura de cada cuadro y evitamos que el último se coloque en una segunda línea horizontal (y por lo tanto fuera de la vista) declarando márgenes negativos al primero en su izquierda y al último en su derecha:
.frame-k {
width: 30%;
}
#slider-k > div:first-child {margin-left: -63px;}
#slider-k > div:last-child {margin-right: -63px;}
El resultado de esos cambios es el que ves. Tenemos cubierta toda la superficie del elemento padre y los cuatro hijos a la vista (en una sola línea).
Las imágenes del slider
Es el momento de colocar las imágenes en cada uno de los cuadros interiores. Sin ayuda de css, el resultado deja un poco que desear: Las imágenes también se ven afectadas por la transformación (skew) de su contenedor. Así que hay que compensarlo. Al hacerlo dejan la esquina inferior izquierda de su contenedor sin cubrir:
Para evitarlo volvemos a recurrir como antes a los márgenes negativos. Recuerda que su padre (.frame-k) tiene declarado overflow: hidden, así que la imagen precedente no se ve tapada y se mantiene el efecto sesgado. Su css final queda así:
.frame-k img {
margin-left: -55px;
transform: skewX(20deg);
}
El resultado tras estos códigos es la imagen inicial del artículo que te muestro de nuevo.
Como puedes ver, ya tenemos todas las superficies cubiertas con las cuatro imágenes sin distorsionar y su borde en oblicuo o sesgado.
Sólo nos queda por hacer una cosa más: mostrar cada imagen un poco más cuando pasemos el cursor por ella para resaltarla y las otras tres un poco menos.
Revelando la imagen con suavidad
Para ello sólo necesitamos modificar las anchuras de las cajas contenedoras de las imágenes. Debido a que el selector de precedente aún no existe en Css necesitamos una regla más. Y como había partido de un contenedor general de tamaño fijo (600px) he optado en la demo por poner las anchuras en píxeles también:
#slider-k:hover > div {width: 108px; cursor: w-resize;}
#slider-k:hover > div:hover {width: 392px;}
Aprovechando que toda la superficie de la caja padre (#slider-k) queda cubierta por sus hijos podemos declarar la primera regla: que al hacer :hover sobre #slider-k la anchura de sus hijos disminuya.
Pero hacer ese :hover lleva implícito hacer simultáneamente :hover sobre alguno de los hijos, con lo que aplica la segunda regla aumentando la anchura de ese hijo el espacio que han disminuido sus hermanos.Y en este aumentar y disminuir de tamaño entra en funcionamiento la declaración inicial de transition para que lo hagan de forma suave.
El resultado final en vivo
Y el premio final es el que puedes ver justo aquí debajo. O ir directo al pen de ejemplo si no se carga.
Como siempre pasa en este tipo de realizaciones, es más largo y lioso de explicar que de realizar.
%20y%20una%20pizca%20de%20animaci%C3%B3n%20al%20cambiar%20los%20tama%C3%B1os%20de%20sus%20im%C3%A1genes.%20Puro%20Css.){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
¡¿ ?!
ResponderEliminar¿No sería más acertado y preciso decir "a mi no me funciona"?
Y si busca algún tipo de ayuda con su comentario obligado añadir una información mínima como:
.- ¿Sólo la copia o también la demo en codepen?
.- Si es la copia:
.- en qué navegador(es) y versión(es).
.- Un enlace a su realización para verla en vivo.
De otra forma es imposible saber dónde radica el fallo. Porque adivinos ya no quedan xD
Un saludo
Quizá lo haya copiado directamente del desarrollo, como si fuese un cut&paste, en vez de usar el cóudpen, que sí tiene la opción de hacer un cut&paste. (Je, qué gracioso lo de ensuciar el copiado con tu publicidad).
ResponderEliminarAprovecho para comentar que yo también lo probé. Está entre ingenioso y brillante. Aunque en Firefox y Opera (no probé otros) la última imagen queda cortada si nos movemos muy rápido sobre la animación. Después se arregla solo, pero debe haber una forma de evitarlo o disimularlo (p.e., con un fondo afín al sitio) para los que tenemos máquinas lentas.
No quise ponerme a estudiar el caso porque me parece una falta de respeto si está hecho por vos. Lo más que voy a hacer yo es romperlo :P
...
Ah, sí. Eso de los adivinos...
Me dejaste intrigado con lo de "ensuciar el copiado con tu publicidad" hasta que descubrí a qué te refieres.
EliminarEs algo ajeno a mi voluntad y que desconocía por completo. Con la licencia beerware sería de idiotas.
Veo que lo inyecta la aplicación de terceros que uso para "el compartir" (sharethis).
Como se avecinan cambios (no se cuándo) voy a sopesar si retirar ese "incluido" o mantenerlo.
Gracias por el aviso, Furoya.
hola,
ResponderEliminarme encanta este slider y te doy las gracias por compartirlo. Tengo una duda
¿hay posibilidad de hacerlo con 3 o dos imagenes?
no he conseguido adaptarlo a meno imagenes.
muchas gracias
Sí, claro que se podrá adaptar. Sólo sería cuestión de mantener la relación entre los tamaños de las cajas que contienen las imágenes (.frame-k) y su contenedor (#slider-k) tanto inicialmente como al hacer :hover y asegurarse que la imágenes son lo suficientemente grandes como para cubrir toda su caja cuando se expande.
EliminarUn saludo y gracias.
Me parece genial la aportación. Gracias.
ResponderEliminarUna pregunta, he intentado hacerlo cuando cinco imágenes, pero sucede que cuando voy a mirar la cuarta o la quinta, tiembla. O sea que pongo el cursor encima y está parpadeando. He jugado con diversos valores, cambiando algunas cosas, pero no termino de dar con ello, ¿alguna idea qué puede ser? Gracias y saludos
Hola Gerardo.
EliminarSi hubieses enlazado a tu desarrollo sería mucho más fácil hallar el origen del problema y buscar una solución exprofeso.
Lo que dices que te ocurre me recuerda el típico ciclo de hacer :hover y perder el foco el elemento simultáneamente al recibirlo.
Crea una copia de tu trabajo en codepen, jsfiddle o cualquier otro lugar y comparte el enlace.
Un saludo
Me parece genial la aportación. Gracias.
ResponderEliminarUna pregunta, he intentado hacerlo cuando cinco imágenes, pero sucede que cuando voy a mirar la cuarta o la quinta, tiembla. O sea que pongo el cursor encima y está parpadeando. He jugado con diversos valores, cambiando algunas cosas, pero no termino de dar con ello, ¿alguna idea qué puede ser? Gracias y saludos