Panoramic Fashion: Visor Css de imagen panorámica v.2 25.5.13
Una realización para poder incluir en cualquier página una gran imagen y poder visionarla sin que destroce la estructura de la página y ofrecerla con un tamaño tal que no se pierdan los detalles.
Panoramic Fashion: Visor Css de imagen panorámica v.2
El anterior visor de imágenes panorámicas adolecía de un fallo conceptual, no menos importante que otros cuantos más: las imágenes van colocadas vía Css. Práctica nada aconsejable si las pics son elementos relevantes, no mera compañía ornamental. Vamos, que si son parte del contenido y añaden información deben ser parte del Html.
Así que para corregir esa y otras carencias y ganarme el perdón, aquí el cuarto visor de imágenes de la serie. Prometo que será el último. De momento y por ahora.
Premisas, Propuestas y Respuestas
Una realización para poder incluir en cualquier página web, sea cual sea su diseño, una gran imagen y poder visionarla sin que destroce la estructura de la página y ofrecerla con un tamaño tal que no se pierdan los detalles y:
Html semántico, sencillo y seriado
El marcado debe ser lo más semántico posible, tan limpio que su uso en casos reales sea no sólo posible sino fácil y sencillo y además poder ser utilizado "de serie" las veces que haga falta.
Esta parte no tiene más allá. Si se trata de una imagen y una información sobre la misma ahí está el elemento figure y su asociado figcaption:
<figure class='visor'>
<img src='ruta/archivo.ext' alt='alt' />
<figcaption>
<h2>Título/h2>
<p>Alguna info relevante sobre la imagen</p>
</figcaption>
</figure>
Nota al margen: recuerda que el elemento figure puede contener otros más que imágenes. Un vídeo, code, una cita o incluso un poema pueden meterse en él.
Y lo mismo para su leyenda o figcaption (optativa y no obligada).
Juegando con Css
Esta era la parte más difícil y aburrida. Ahora vamos con lo divertido. Lo primero es hacer que la composición se comporte como deseamos:
- Que no desarme la página y se adapte a su contenedor en cualquier circunstancia.
- Que contenga sin ser desbordado.
- Que permanezca dentro del flujo del documento
El visor o elemento figure
.visor {
width: 45rem;
max-width: 95%;
margin: 1rem auto 0;
overflow: hidden;
position: relative;
border: 5px solid #E5F04C;
border-radius: 3px;
}
La anchura declarada de 45rem debe sopesarse y variarse en función del "tamaño medio" de las imágenes panorámicas a mostrar y su relación ancho/alto. Y si éstas son más altas que largas habría que actuar en el css sobre las alturas de él y la imagen en vez de las anchuras.
La imagen
.visor img {
display: block;
position: relative;
width: 300%;
transition: 5s linear;
}
Al estar como relative la mantenemos dentro del fluir del documento y es la que da la altura a su padre.
Si estimamos que el tamaño típico y usual de 1rem suele estar entre los 16 y 18px tendremos una imagen entre los 2160 y 2430px. Valores normales para imágenes panorámicas.
Las alturas son de lo más dispares, así que estos valores de 45rem y 300% habría que revisarlos para mantener cierta armonía entre la anchura y altura del elemento figure.
Y por último verás que ya está declarada una transición lo suficientemente amplia en el tiempo como para que se puedan ver los detalles de la imagen al desplazarse.
Mostrando la imagen
Es el momento de actuar para que bajo demanda del usuario la imagen se mueva para poder ser visualizada.
.visor:hover img,
.visor:focus img {
-webkit-transform: translateX(-66.6%);
}
Eso es todo lo que se necesita. Símplemente trasladamos la imagen hacia la izquierda. El valor de 66% en negativo es evidente y lógico:
- En Css los valores de desplazamiento positivos son en el sentido horario: eje 'X' hacia la derecha, eje 'Y' hacia abajo. Y los negativos al contrario: eje 'X' hacia la izquierda y el 'Y' hacia arriba.
- 66.6%: Queremos que el borde derecho de la imagen llegue hasta el borde derecho de su caja padre sin dejar al descubierto el fondo de él. La imagen son tres veces (300%) la anchura de aquel. Así que quedan 2/3 ocultos y esto es lo que hay que moverla.
La leyenda o figcaption
Ahora sí que necesitamos que ésta parte no influya en las medidas de su padre descomponiendo y dejando al aire parte el fondo. Así que lo posicionamos de forma absoluta y lo centramos por aquello de la armonía:
figcaption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
Y a continuación añade aquellas declaraciones para los elementos que incluyas en él. Tales como encabezados, enlaces... etc,
¡Hey! Accesibilidad, por favor
No me olvido que estoy presentando un elemento en su mayor parte oculto. Nada menos que 2/3 de él. Así que hay que indicarle al usuario que ahí hay más de lo que ve.
Para esta demo opté por el típico símbolo del play utilizado en cualquier vídeo: el triángulo en su círculo semitransparente. Creo que es lo suficientemente explícito.
Todo junto y en funcionamiento
Y llegó la hora de ver cómo se comporta todo lo anterior junto y en funcionamiento. Sin más aquí lo tienes.
Check out this Pen!
Si por alguna razón no lo ves o prefieres verlo en grande, aquí el acceso al pen directo y a toda pantalla:
La demo en CodepenLa serie completa de los visores Css
Por si te perdiste alguno, esta es la serie de los visores de imágenes en puro Css:
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 disculpa mi ignorancia pero tengo un problema no logro hacer funcionar el código, se que el código HTML va donde uno quiero visualizar la imagen, el CSS va antes del cierre del Style, pero no se que el JS me imagino que es el scripts, si es así van ates del cierre del head pero no funciona. Gracias
ResponderEliminarHola Ronald
EliminarEsta demo está hecha en puro css. No hay nada de js en ella. Lo que puede haberte inducido a error en el apartado de js del pen es sólo un comentario a la realización.
No dices en qué navegador estás testando tu copia. Pero seguramente, aquí sale mi vena de adivino, te falte añadir los prefijos privativos (-moz- | -webkit- | étc) en alguna propiedad.
Date cuenta que codepen da la opción de hacer las demos sin ellos (marcando la opción prefix free). Y en este caso yo la utilicé.
También puedes hacerlo en tus realizaciones usando la librería prefixfree de Lea Verou. Más que recomendable.
Un saludo
Guau gracias me ayudaste :)
EliminarHola Kseso, día a día me sorprendo todo lo que se puede hacer solo con css, me gusta mucho tu blog, y es para mi un material de consulta permanente, muchas gracias !
ResponderEliminar