soy Kseso y esto EsCSS

Troceado de imagen y revelado por arrastre puro Css.

Dos demos: revelando imágenes por arrastre y múltiples cortes con una sola imagen en puro css.

Troceado de imagen y revelado por arrastre puro Css.

·Por Kseso ✎ 4

Troceado de imagen y revelado por arrastre puro Css.Lo siguiente son dos variaciones de otros tantos ejemplos que vi en codepen. Pruebas o demos para llevar un poco más allá los límites de Css. Lo siguiente, el posible uso en realizaciones reales, ya queda de tu cuenta.

La primera consiste en trocear una única y misma imagen en múltiples segmentos declarándola sólo una vez. Basada en el uso del valor 'inherit'. Al :hover giran los segmentos sobre sí mismos.

La segunda demo consiste el típico 'arrastrar para mostrar'.

Imagen troceada puro Css

Esta demo está inspirada en el pen del usuario Dudley Storey de codepen. Nota que ni el efecto es exactamente el mismo ni tampoco la vía de conseguirlo.

Mientras que él se basa en múltiples imágenes en el html vía src y el uso de la propiedad 'clip' para lograr los segmentos superpuestos, yo opto por una sola declaración de la imagen para el 'background' y el abuso de pseudoelementos. Su autor, del que ya he trasladado algún artículo al español en este blog, tiene un artículo en su blog donde explica su realización.

See the Pen One image / many slices pure css by Kseso (@Kseso) on CodePen

Ver la demo a full

Intercambio de imágenes por arrastre puro Css

En esta segunda demo todo el mérito es de Furoya que realizó el pen original. Por mi parte sólo me limité a pulir un poco sus códigos, ampliar el área sensible al arrastre a todo el borde y darle una manita de pintura al acabado final.

See the Pen Image Swapping ↔ pure Css by Kseso (@Kseso) on CodePen

Ver la demo a full

Nota que en esta última demo los tamaños están declarados en valores absolutos. Así que ahí tienes un aspecto en el que puedes mejorar el ejemplo original y éste mío.

Si tienes alguna duda o quieres alguna explicación sobre algún aspecto de las demos, déjala en un comentario.

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