soy Kseso y esto EsCSS

Simple rwd gallery powered by Css: rotando posiciones

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

Por Kseso ✎ 7

Simple rwd gallery powered by Css: rotando posicionesUna 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.

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

Comentarios: 7

  1. Tengo dudas. Oiga kmo funciona sto?
    ;)

    ResponderEliminar
    Respuestas
    1. ¿Ves la ranura de las monedas? Mete 50 ctms de € y pulsa el botón.
      Si te salen 3 cerezas ganas.
      Suerte, Oloman
      xD

      Eliminar
  2. ¡Eh, se me ha tragado dos euros y no se mueve nada ! ¡Que venga el encargado!

    ResponderEliminar
  3. Ya en serio, muchas gracias por el aporte :-) He descubierto el blog por un comentario de Pzin en Forosdelweb. ¡Saludos cordiales!

    ResponderEliminar
    Respuestas
    1. ¡Lo que faltaba! ¡También spam de FdW!
      XD
      (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.

      Eliminar
  4. 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 :(
    Espero puedas responder, saludos cordiales

    ResponderEliminar
    Respuestas
    1. Hola Carla
      Claro 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

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap