Simple rwd gallery powered by Css: rotando posiciones 2.4.14
Una galería o pestañas en puro Css donde los items rotan e intercambian su posición manteniéndose siempre a la vista.
Simple rwd gallery powered by Css: rotando posiciones
Una sencilla galería "responsive" en puro css. Sencilla y ordenada en cuanto a su visualización. Los items van rotando posiciones a medida que se selecciona el adyacente y el que se visualizaba en grande pasa a ocupar la última posición.
Esta sencillez en su funcionamiento tiene detrás un Css un poco más complejo. Especialmente la parte de los selectores.
Como otras muchas demos del blog, todo se basa en técnicas ya explicadas con anterioridad: uso o más bien abuso de la pseudoclase :checked y una pizca de transiciones para animar el intercambio de posiciones de las imágenes.
See the Pen Powered by Css & by Kseso (@Kseso) on CodePen.
Ver demo a full _ Descargar códigos
En esta ocasión por falta de tiempo y además por haber ya explicado el funcionamiento y técnica usada con anterioridad te dejo que seas tú quien disfrute descubriendo el código Css. Eso sí, si tienes alguna duda sobre la galería, aquí debajo están los comentarios.
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
Tengo dudas. Oiga kmo funciona sto?
ResponderEliminar;)
¿Ves la ranura de las monedas? Mete 50 ctms de € y pulsa el botón.
EliminarSi te salen 3 cerezas ganas.
Suerte, Oloman
xD
¡Eh, se me ha tragado dos euros y no se mueve nada ! ¡Que venga el encargado!
ResponderEliminarYa en serio, muchas gracias por el aporte :-) He descubierto el blog por un comentario de Pzin en Forosdelweb. ¡Saludos cordiales!
ResponderEliminar¡Lo que faltaba! ¡También spam de FdW!
EliminarXD
(Bueno, supongo que si es un intercambio de promociones, ya no es tan grave.)
Hace rato que Pzin no viene por acá, pero por tu comentario parece que al menos se acuerda de este blog.
Hola, quisiera saber si esto lo puedo usar con fotografías de mi PC, y si pueden ser más de 4... trato de poner la URLen el css pero nada. cambie el Index de ubicacion y todo bien con tus URL... pero de PC nada que funka :(
ResponderEliminarEspero puedas responder, saludos cordiales
Hola Carla
EliminarClaro que puedes usar esta demo (y cualquier otra del blog) para aquello que quieras. Tengo licencia beerware
y si pueden ser más de 4
Sí. Pero deberás modificar los códigos, especialmente el Css.
Sobre las rutas:
Las imágenes en la demo están colocadas como background-image.
Si con tus propias imágenes no te va (no aparecen) todo indica que estás colocando mal la ruta a ellas. Busca información relativa a este tema.
Recuerda que las rutas relativas a los recursos empleados en el Css deben ser con relación a la ubicación del propio archivo Css.
Por otro lado, no olvides que desde la "internet" no se puede acceder al contenido / recursos del pc. Por seguridad.
Un saludo