Responsive elements pure Css vs jQuery 6.4.16
Una demo Css para emular (¿mejorando?) la realización basada en jQuery "Responsive elements". Apoyada en un uso mínimo de @media queries css
Responsive elements pure Css vs jQuery
Unas fechas atrás (originalmente 9/13) fue bastante mentado en redes sociales y algún post que otro la realización Responsive elements. La tienes disponible en Github para su descarga.
Su funcionamiento está basado en jQuery y su autor lo define como:
Responsive elements hace posible que cualquier elemento se adapte y responda a la zona que ocupa. Es una pequeña biblioteca javascript que puede usar en sus proyectos actuales.
La peculiaridad de esta realización es que la imagen no sólo escala su tamaño en función del que tiene el elemento que la contiene, si no que además también el lugar donde se visualiza.
Así que como tenía un momento me pregunté si podría lograrse lo mismo sin necesidad de cargar las dos librerías js y manteniendo la secuencia de elementos de la realización con javascript: cita + imagen + pie.
Y por supuesto sin tener que crear, aplicar y cambiar al vuelo y en vivo la gran cantidad de clases de la demo. Hasta 18 he llegado a contar que declara simultáneamente al elemento padre. Demasiadas.
Responsive elements pure Css (no js)
A priori la única dificultad aparente sería el comportamiento de la imagen para pasar de una zona a otra de su elemento padre.
Puedes ver su funcionamiento en el siguiente gif si no quieres ir a la página del proyecto:
El resto se reduce a cambiar el tamaño de la tipografía y la imagen en función del tamaño del viewport. Nada del otro mundo desde que nos regalaron las reglas @media queries.
El marcado html
Tras un pequeña reflexión creí más oportuno cambiar el etiquetado, manteniendo la secuencia, por el elemento figure como caja padre, un blockquote para la cita y los datos del pie como figcaption.
<figure>
<blockquote>
Me voy porque la tierra y el pan y la luz ya no son míos.
Volveré mañana en el corcel del Viento.
Volveré. Y cuando vuelva, vosotros os estaréis yendo.
</blockquote>
<img alt='' src='8uZHAL4.jpg' />
<figcaption>
<span class='autor'>León Felipe. Poeta</span>
<span class='fechas'>Tábara, Zamora (1884) - Ciudad de México (1968)</span>
</figcaption>
</figure>
Comportamiento de la imagen
La imagen, al ir entre la cita y el 'figcaption', es la única que requiere de un poco más de atención. Así que sólo necesitamos hacerle un sitio a la derecha de la cita cuando el viewport alcanza un tamaño X y al hacerse más pequeño hacer que ese hueco desaparezca para que pase a la línea inferior de la cita.
Para ello sólo es necesario declararle un margen derecho a la cita y en ese espacio que queda posicionar la imagen de forma absoluta.
@media (min-width: 40rem) {
blockquote {
margin-right: 35%;
}
img {
position: absolute;
right: 20px;
top: 20px;
width: 30%;
max-width: 215px;
}
}
Y cuando el tamaño sea inferior a los 40rem (punto arbitrario de ruptura) declaramos un comportamiento de imagen distinto:
@media (max-width: 40rem) {
img {
float: left;
width: 60px;
margin-right: .5rem;
}
}
Fíjate que el margen de la cita no es necesario reescribirlo ya que está en una @media query específica.
Tras un poco más de código para el tercer comportamiento (esconder la imagen y una parte del 'figcaption') en resoluciones mínimas, podemos dar por concluido el trabajo añadiendo una pequeña transición en el selector universal '*' para suavizar los cambios
See the Pen Responsive elements pure css by Kseso (@Kseso) on CodePen
Para verlo en funcionamiento quizás sea mejor ver el pen en su página. Yo en estos casos lo abro en el editor y coloco los códigos a la izquierda y la vista del resultado a la derecha.
No olvides que esto es sólo un juego. Si decides jugar con él o aplicarlo a una página "de producción" deberías asegurarte de su correcto funcionamiento en todas las situaciones y de introducir los cambios oportunos y mejoras para que no tengas sorpresas.
 la realización basada en jQuery "Responsive elements".
Apoyada en un uso mínimo de @media queries css){kind=link}
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