HTML5 tiene un nuevo atributo, contenteditable, que se puede aplicar a cualquier elemento y permite editarlo directamente en la ventana del navegador. Piense en la entrada de texto con un valor predefinido, pero puede ser literalmente cualquier elemento. Los elementos de formulario, como las entradas de texto, admiten la pseudoclase :focus, que nos permite diseñar esos elementos cuando se hace clic en ellos o se navega de otra manera. Darle a un elemento el atributo contenteditable significa que ahora también es compatible con la pseudo clase :focus, ¡lo que abre algunas posibilidades interesantes!
Aprovecharemos este pequeño truco para crear una imagen en expansión (como una caja de luz sin la superposición) justo dentro de algún contenido.
ACTUALIZACIÓN: Aún mejor, puede otorgar a los atributos un atributo tabindex, como lo haría con un elemento de formulario, que permite: enfoque sin la capacidad de edición. Este artículo ha sido actualizado para ir por ese camino en su lugar.
Marcado HTML5
HTML5 tiene buenos elementos para incluir imágenes con subtítulos.
<section class="image-gallery">
<figure>
<img src="https://css-tricks.com/expanding-images-html5/images/img-1.jpg" alt="jump, matey" />
<figcaption">Jump!</figcaption>
</figure>
</section>Solo le damos al tabindex del elemento de la figura, para que pueda estar enfocado.
<figure tabindex=1>¡Dé a cada figura subsiguiente un valor de índice de tabulación uno más alto y las imágenes podrán tabularse muy bien desde el teclado!
Las imagenes
Las imágenes serán “tamaño completo”.
Esto significa que se reducirán para mostrarse regularmente en la página y se ampliarán cuando hagamos nuestra expansión mágica de CSS. Potencialmente una pérdida de ancho de banda para los navegadores que no admiten esto. La compensación es su llamada.
El CSS
Pantalla normal:
figure {
width: 120px;
float: left;
margin: 0 20px 0 0;
background: white;
border: 10px solid white;
-webkit-box-shadow: 0 3px 10px #ccc;
-moz-box-shadow: 0 3px 10px #ccc;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-webkit-transition: all 0.7s ease;
-moz-transition: all 1s ease;
position: relative;
}
figcaption {
text-align: center;
display: block;
font-size: 12px;
font-style: italic;
}
figure img {
width: 100%; /* Scale down */
}La parte :focus de esto no es CSS3, sino sombras, transformaciones y transiciones. El estado de desplazamiento rotará la imagen un poco, y el estilo de enfoque (cuando se hace clic en la imagen), la expandirá, la rotará nuevamente y se asegurará de que esté en la parte superior con el índice z.
figure:hover {
-webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg);
-webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
}
figure:focus {
outline: none;
-webkit-transform: rotate(-3deg) scale(2.5); -moz-transform: rotate(-3deg) scale(2.5);
-webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
z-index: 9999;
}Compatibilidad del navegador
El atributo contenteditable de HTML5 es compatible con Firefox 3.6+, Safari 4+, Chrome y Opera (10.6 solo probado). Tenga en cuenta que el atributo caerá en cascada a todos los elementos secundarios. En nuestra demostración, tener la imagen y el título de la figura editables no tiene mucho sentido, por lo que podemos desactivarlo individualmente en ellos.
<figure contenteditable="true">
<img src="https://css-tricks.com/expanding-images-html5/images/img-1.jpg" alt="jump, matey" contenteditable="false" />
<figcaption contenteditable="false">Jump!</figcaption>
</figure>Si olvidas desactivar la editabilidad de las imágenes, Firefox puede verse un poco raro y te da controles de cambio de tamaño para las imágenes. Actualizar: otra razón para usar tabindex en su lugar.
Opera respeta los elementos secundarios que no son editables, pero aún ejecuta el corrector ortográfico en ellos y subrayará en rojo las palabras que encuentre mal escritas, lo que puede ser un poco extraño.
Sin embargo, nuestra demostración también se basa en transformaciones para “funcionar”, que solo son compatibles con los navegadores WebKit actuales y Firefox 4+. Firefox 3.6 admite la transformación pero no la transición.
Sin embargo, la desventaja es que las imágenes simplemente no se expanden, lo que por supuesto no es gran cosa.
Demo y descarga
Ver demostración Descargar archivos
Relacionado
- Si está buscando un lightbox de CSS puro, incluida la superposición, consulte la versión de Stu Nicholls.
- Si necesita que su caja de luz sea totalmente compatible con varios navegadores, use JavaScript como el complemento Colorbox para jQuery.
Créditos
Muchas gracias a Adrian Sinclair que me contactó sobre esta idea y me ayudó con todo.