soy Kseso y esto EsCSS

Slider con bordes sesgados y transición animada

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

·Por Kseso ✎ 9

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:

slider bordes oblicuos

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:

slider bordes oblicuos

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

slider bordes oblicuos

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:

slider bordes oblicuos

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.

slider bordes oblicuos

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.

Check out this Pen!

avatar del Editor del blog

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