Troceado de imagen y revelado por arrastre puro Css. 7.11.13
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.
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
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
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.
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
Hola Kseso. Me gustó mucho el proyecto de intercambio de imágenes. Me encantaría saber como puedo hacer que la barra de arrastre quedara en la parte derecha de la imágen. Cuando especifico el 'width' del selector ".charly" a 300px (el ancho de mi imagen) para que se alínee a la derecha entonces ya no se puede arrastrar. Puedes ver el ejemplo aquí: http://diversopr.com/dlc/50052/Tornillo300x600/ y aquí: http://diversopr.com/dlc/50052/Tornillo300x600-b/
ResponderEliminarHola Edu
EliminarDespués de tanto tiempo sólo recuerdo que este juego tenía algún que otro "número mágico" para hacerlo funcionar y ajustar al píxel.
Referente a tu "problema" creo que lo estás probando en Chrome, porque en FF sí es posible el redimensionado.
Parece que en Chrome el "resize" + width sí puedes modificar el tamaño más de la anchura declarada pero no menos del indicado en width.
Es a la conclusión que llego tras una prueba rápida con tu demo y la del post.
No se la finalidad o uso que le vayas a dar, pero posíblemente esta demo no sea lo más adecuado para cualquier otra cosa que no sea eso, una demo.
Hay otras realizaciones basadas en js que posíblemente sean más recomendables por usabilidad y por "aceptar" de mejor grado variaciones en las medidas de las imágenes a comparar.
Un saludo
Kseso: Hoy me puse a mirar este problema, y me aparecieron algunos más, encima del "número mágico". Y de las limitaciones de Chrome :P
Eliminaredu: El ejemplo que ofreciste tiene demasiado javascript ¿lo habías notado?.
Aunque volviendo a nuestro asunto, digamos que uno de los inconvenientes de arrstrar de derecha a izquierda es que los elementos se redimensinan de izquierda a derecha y/o de arriba hacia abajo. Así funcionan.
Una manera de salvarlo es que se pudiese abrir el 'textarea' ya agrandado pero manteniendo el ancho menor ... algo que no está previsto en CSS. Y menos en HTML.
Con javascript puede ser fácil, dependiendo del caso real donde lo uses, claro.
No sé si mostré por aquí cómo se leen las coordenadas del puntero (si no, lo voy a hacer en uno o dos meses a partir de la fecha), que resulta un modo de saber dónde estamos arrastrando y solamente hay que llevar el borde (el ancho, en realidad) del elemento que queremos redimensionar a ese punto, y debe ser en tiempo real, para que parezca un verdadero arrastre. El mayor inconveniente es que si no se están usando medidas absolutas y el banner no está a la izquierda, hay que tomar primero todas las distancias y tamaños en el documento y después pasarlas al escript del arrastre.
El mecanismo básico es muy simple —después hay que optimizarlo y se empieza a complicar— pero si ya estás usando JQuery entonces debés tener unos escripts prehechos para esto. Y si no, los buscas por ahí, porque seguro están publicados por alguien con puro JS (¿así que a esto le dicen "Vanilla"?; me enteré el otro día).
HTML5 tiene algunos atributos para marcar el drag&drop, pero no mueve nada. Para eso hay que usar lenguaje de programación o las mismas facultades que ya tenga el navegador.
Este, Furoya, es un claro ejemplo de pretender utilizar un ejemplo extremo y creativo del uso de CSS + HTML sin imaginación.
EliminarMe explico: afirmación hecha y basada en mi presunción de que lo que se quiere es mostrar de entrada la escena que ahora queda escondida.
Vistas las limitaciones de los recursos css + html empleados sería de todo más sencillo invertir "las escenas" en vez de tener que lidiar con el desplazamiento "del arrastre" a una posición distinta.
Creo. Pero quizás la finalidad buscada sea otra y me haya pasado de "listo e imaginativo".
Un saludo.