Muy bien, entonces el la última vez que nos registramos, estábamos usando CSS Grid y combinándolos con CSS clip-path y mask Técnicas para crear cuadrículas con formas extravagantes.
Esta es solo una de las fantásticas cuadrículas que hicimos juntos:
¿Listo para la segunda ronda? Seguimos trabajando con CSS Grid, clip-pathy mask, pero al final de este artículo, terminaremos con diferentes formas de organizar las imágenes en la cuadrícula, incluidos algunos efectos de desplazamiento radial que crean una experiencia auténtica e interactiva para ver imágenes.
¿Y adivina qué? estamos usando el mismo marcado que usamos la última vez. Aquí está eso de nuevo:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Al igual que el artículo anterior, solo necesitamos un contenedor con imágenes dentro. ¡Nada mas!
Cuadrícula de imágenes anidadas
La última vez, nuestras cuadrículas eran, bueno, las típicas cuadrículas de imágenes. Además de las formas ordenadas con las que las enmascaramos, eran cuadrículas simétricas bastante estándar en cuanto a cómo colocamos las imágenes en el interior.
Intentemos anidar una imagen en el centro de la cuadrícula:
Comenzamos configurando una cuadrícula de 2✕2 para cuatro imágenes:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gap between images */
display: grid;
gap: var(--g);
grid-template-columns: repeat(2, auto);
}
.gallery > img {
width: var(--s);
aspect-ratio: 1;
object-fit: cover;
}Nada complejo todavía. El siguiente paso es cortar la esquina de nuestras imágenes para crear el espacio para la imagen anidada. Ya tengo un artículo detallado sobre cómo cortar esquinas usando clip-path y mask. También puedes usar mi generador en línea para obtener el CSS para enmascarar esquinas.
Lo que necesitamos aquí es cortar las esquinas en un ángulo igual a 90deg. Podemos usar el mismo técnica de gradiente cónico de ese artículo para hacer eso:
.gallery > img {
mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) { --_a: 90deg; }
.gallery > img:nth-child(2) { --_a: 180deg; }
.gallery > img:nth-child(3) { --_a: 0deg; }
.gallery > img:nth-child(4) { --_a:-90deg; }Podríamos usar el clip-path método para cortar esquinas de ese mismo artículo, pero enmascarar con degradados es más adecuado aquí porque tenemos la misma configuración para todas las imágenes; todo lo que necesitamos es una rotación (definida con la variable --_a) obtienen el efecto, por lo que estamos enmascarando desde el interior en lugar de los bordes exteriores.
Ahora podemos colocar la imagen anidada dentro del espacio enmascarado. Primero, asegurémonos de tener un quinto elemento de imagen en el HTML:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
</div>Vamos a confiar en el buen posicionamiento absoluto para colocarlo allí:
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}El inset La propiedad nos permite colocar la imagen en el centro usando una sola declaración. Sabemos el tamaño de la imagen (definido con la variable --s), y sabemos que el tamaño del contenedor es igual al 100%. Hacemos algunos cálculos, y la distancia desde cada borde debe ser igual a (100% - var(--s))/2.
Tal vez se pregunte por qué estamos usando clip-path en absoluto aquí. Lo estamos usando con la imagen anidada para tener un espacio consistente. Si lo elimináramos, notaría que no tenemos el mismo espacio entre todas las imágenes. De esta manera, estamos recortando un poco de la quinta imagen para obtener el espacio adecuado a su alrededor.
El código completo de nuevo:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gap between images */
display: grid;
gap: var(--g);
grid-template-columns: repeat(2, auto);
position: relative;
}
.gallery > img {
width: var(--s);
aspect-ratio: 1;
object-fit: cover;
mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) {--_a: 90deg}
.gallery > img:nth-child(2) {--_a:180deg}
.gallery > img:nth-child(3) {--_a: 0deg}
.gallery > img:nth-child(4) {--_a:-90deg}
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}Ahora, muchos de ustedes también se estarán preguntando: ¿por qué todas las cosas complejas cuando podemos colocar la última imagen en la parte superior y agregarle un borde? Eso ocultaría las imágenes debajo de la imagen anidada sin una máscara, ¿verdad?
Eso es cierto, y obtendremos lo siguiente:
No maskEn clip-path. Sí, el código es fácil de entender, pero hay un pequeño inconveniente: el color del borde debe ser el mismo que el del fondo principal para que la ilusión sea perfecta. Este pequeño inconveniente me basta para hacer el código más complejo a cambio de una transparencia real independiente del fondo. No estoy diciendo que un enfoque fronterizo sea malo o incorrecto. Lo recomendaría en la mayoría de los casos en los que se conocen los antecedentes. Pero estamos aquí para explorar cosas nuevas y, lo que es más importante, construir componentes que no dependan de su entorno.
Probemos otra forma esta vez:
Esta vez, hicimos que la imagen anidada fuera un círculo en lugar de un cuadrado. Esa es una tarea fácil con border-radius Pero necesitamos usar un corte circular para las demás imágenes. Esta vez, sin embargo, confiaremos en un radial-gradient() en lugar de un conic-gradient() para conseguir ese bonito aspecto redondeado.
.gallery > img {
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2), #000 calc(51% + var(--g)/2));
}
.gallery > img:nth-child(1) { --_a: calc(100% + var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(2) { --_a: calc(0% - var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(3) { --_a: calc(100% + var(--g)/2) calc(0% - var(--g)/2); }
.gallery > img:nth-child(4) { --_a: calc(0% - var(--g)/2) calc(0% - var(--g)/2); }Todas las imágenes usan la misma configuración que el ejemplo anterior, pero actualizamos el punto central cada vez.
La figura anterior ilustra el punto central de cada círculo. Aún así, en el código real, notará que también estoy teniendo en cuenta la brecha para asegurar que todos los puntos estén en la misma posición (el centro de la cuadrícula) para obtener un círculo continuo si los combinamos.
Ahora que tenemos nuestro diseño, hablemos sobre el efecto de desplazamiento. En caso de que no lo hayas notado, un genial efecto de desplazamiento aumenta el tamaño de la imagen anidada y ajusta todo lo demás en consecuencia. Aumentar el tamaño es una tarea relativamente fácil, pero actualizar el degradado es más complicado ya que, por defecto, los degradados no se pueden animar. Para superar esto, usaré un font-size hackear para poder animar el degradado radial.
Si revisa el código del degradado, puede ver que estoy agregando 1em:
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));Se sabe que em las unidades son relativas al elemento padre font-size, así que cambiando el font-size de las .gallery también cambiará el calculado em valor: este es el truco que estamos usando. estamos animando el font-size de un valor de 0 a un valor dado y, como resultado, el degradado se anima, haciendo que la parte recortada sea más grande, siguiendo el tamaño de la imagen anidada que se hace más grande.
Aquí está el código que resalta las partes involucradas en el efecto de desplazamiento:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gaps between images */
font-size: 0; /* initially we have 1em = 0 */
transition: .5s;
}
/* we increase the cut-out by 1em */
.gallery > img {
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));
}
/* we increase the size by 2em */
.gallery > img:nth-child(5) {
width: calc(var(--s) + 2em);
}
/* on hover 1em = S/5 */
.gallery:hover {
font-size: calc(var(--s) / 5);
}El font-size truco es útil si queremos animar degradados u otras propiedades que no se pueden animar. Las propiedades personalizadas definidas con @property pueden resolver este problema, pero apoyo para ello todavía falta en el momento de escribir este artículo.
Descubrí el font-size truco de @SelenIT2 al tratar de resolver un reto en twitter.
¿Otra forma? ¡Vamos!
Esta vez recortamos la imagen anidada en forma de rombo. Te dejaré diseccionar el código como ejercicio para descubrir cómo llegamos aquí. Notarás que la estructura es la misma que en nuestros ejemplos. Las únicas diferencias son cómo usamos el degradado para crear la forma. ¡Sumérgete y aprende!
Cuadrícula de imagen circular
Podemos combinar lo que hemos aprendido aquí y en artículos anteriores para crear una cuadrícula de imágenes aún más interesante. Esta vez, hagamos que todas las imágenes en nuestra cuadrícula sean circulares y, al pasar el mouse, expandamos una imagen para revelar todo mientras cubre el resto de las fotos.
La estructura HTML y CSS de la cuadrícula no es nada nuevo, así que omitamos esa parte y concentrémonos en la forma circular y el efecto de desplazamiento que queremos.
Vamos a usar clip-path y su circle() función para - ¡lo has adivinado! — recorta un círculo de las imágenes.
Esa figura ilustra la clip-path utilizado para la primera imagen. El lado izquierdo muestra el estado inicial de la imagen, mientras que el derecho muestra el estado flotante. Puedes usar Esta herramienta en línea para jugar y visualizar el clip-path valores.
Para las otras imágenes, podemos actualizar el centro del círculo (70% 70%) para obtener el siguiente código:
.gallery > img:hover {
--_c: 50%; /* same as "50% at 50% 50%" */
}
.gallery > img:nth-child(1) {
clip-path: circle(var(--_c, 55% at 70% 70%));
}
.gallery > img:nth-child(2) {
clip-path: circle(var(--_c, 55% at 30% 70%));
}
.gallery > img:nth-child(3) {
clip-path: circle(var(--_c, 55% at 70% 30%));
}
.gallery > img:nth-child(4) {
clip-path: circle(var(--_c, 55% at 30% 30%));
}Tenga en cuenta cómo estamos definiendo el clip-path valores como una reserva en el interior var(). De esta manera, nos permite actualizar más fácilmente el valor al pasar el mouse al establecer el valor de la --_c variable. Cuando usas circle(), la posición predeterminada del punto central es 50% 50%, por lo que podemos omitir eso para obtener un código más conciso. Por eso ves que solo estamos poniendo 50% en lugar de 50% at 50% 50%.
Luego, aumentamos el tamaño de nuestra imagen al pasar el mouse al tamaño total de la cuadrícula para que podamos cubrir las otras imágenes. También aseguramos la z-index tiene un valor más alto en la imagen desplazada, por lo que es la primera en nuestra contexto de apilamiento.
.gallery {
--s: 200px; /* controls the image size */
--g: 8px; /* controls the gap between images */
display: grid;
grid: auto-flow var(--s) / repeat(2, var(--s));
gap: var(--g);
}
.gallery > img {
width: 100%;
aspect-ratio: 1;
cursor: pointer;
z-index: 0;
transition: .25s, z-index 0s .25s;
}
.gallery > img:hover {
--_c: 50%; /* change the center point on hover */
width: calc(200% + var(--g));
z-index: 1;
transition: .4s, z-index 0s;
}
.gallery > img:nth-child(1){
clip-path: circle(var(--_c, 55% at 70% 70%));
place-self: start;
}
.gallery > img:nth-child(2){
clip-path: circle(var(--_c, 55% at 30% 70%));
place-self: start end;
}
.gallery > img:nth-child(3){
clip-path: circle(var(--_c, 55% at 70% 30%));
place-self: end start;
}
.gallery > img:nth-child(4){
clip-path: circle(var(--_c, 55% at 30% 30%));
place-self: end;
}¿Qué está pasando con el
place-self¿propiedad? ¿Por qué lo necesitamos y por qué cada imagen tiene un valor específico?
¿Recuerdas el problema que tuvimos en el artículo anterior cuando creando la cuadrícula de piezas del rompecabezas? Aumentamos el tamaño de las imágenes para crear un desbordamiento, pero el desbordamiento de algunas imágenes era incorrecto. Los arreglamos usando el place-self propiedad.
Mismo problema aquí. Estamos aumentando el tamaño de las imágenes para que cada una desborde sus celdas de cuadrícula. Pero si no hacemos nada, todos se desbordarán en los lados derecho e inferior de la cuadrícula. Lo que necesitamos es:
- la primera imagen en desbordar el borde inferior derecho (el comportamiento predeterminado),
- la segunda imagen para desbordar el borde inferior izquierdo,
- la tercera imagen para desbordar el borde superior derecho, y
- la cuarta imagen para desbordar el borde superior izquierdo.
Para conseguir eso, necesitamos colocar cada imagen correctamente usando el place-self propiedad.
En caso de que no esté familiarizado con place-self, es la abreviatura de justify-self y align-self para colocar el elemento horizontal y verticalmente. Cuando toma un valor, ambas alineaciones usan ese mismo valor.
Paneles de imágenes desplegables
En un artículo anterior, creé un efecto de zoom genial que se aplica a una cuadrícula de imágenes donde podemos controlar todo: número de filas, número de columnas, tamaños, factor de escala, etc.
Un caso particular fueron los clásicos paneles extensibles, donde solo tenemos una fila y un contenedor de ancho completo.
¡Tomaremos este ejemplo y lo combinaremos con formas!
Antes de continuar, recomiendo leer mi otro articulo para entender cómo funcionan los trucos que estamos a punto de cubrir. Compruébelo y continuaremos aquí para centrarnos en la creación de las formas de los paneles.
Primero, comencemos simplificando el código y eliminando algunas variables.
Solo necesitamos una fila y la cantidad de columnas debe ajustarse según la cantidad de imágenes. Eso significa que ya no necesitamos variables para el número de filas (--n) y columnas (--m ) pero necesitamos usar grid-auto-flow: column, lo que permite que la cuadrícula genere automáticamente columnas a medida que agregamos nuevas imágenes. Consideraremos una altura fija para nuestro contenedor; por defecto, será de ancho completo.
Recortemos las imágenes en una forma inclinada:
clip-path: polygon(S 0%, 100% 0%, (100% - S) 100%, 0% 100%);Una vez más, cada imagen está contenida en su celda de cuadrícula, por lo que hay más espacio entre las imágenes de lo que nos gustaría:
Necesitamos aumentar el ancho de las imágenes para crear una superposición. reemplazamos min-width: 100% min-width: calc(100% + var(--s)), Donde --s es una nueva variable que controla la forma.
Ahora tenemos que corregir la primera y la última imagen, para que se desangren en la página sin espacios. En otras palabras, podemos eliminar la inclinación del lado izquierdo de la primera imagen y la inclinación del lado derecho de la última imagen. Necesitamos un nuevo clip-path específicamente para esas dos imágenes.
También tenemos que rectificar el desbordamiento. Por defecto, todas las imágenes se desbordarán en ambos lados, pero para la primera, necesitamos un desbordamiento en el lado derecho mientras que necesitamos un desbordamiento izquierdo para la última imagen.
.gallery > img:first-child {
min-width: calc(100% + var(--s)/2);
place-self: start;
clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
min-width: calc(100% + var(--s)/2);
place-self: end;
clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}¡El resultado final es un bonito panel en expansión de imágenes inclinadas!
Podemos añadir tantas imágenes como queramos y la cuadrícula se ajustará automáticamente. Además, ¡solo necesitamos controlar un valor para controlar la forma!
Podríamos haber hecho este mismo diseño con flexbox ya que estamos tratando con una sola fila de elementos. Aquí está mi implementación.
Claro, las imágenes inclinadas son geniales, pero ¿qué pasa con un patrón en zig-zag? Ya me burlé de este en el final del último artículo.
Todo lo que estoy haciendo aquí es reemplazar clip-path mask… ¿y adivina qué? Ya tengo un artículo detallado sobre creando esa forma de zig-zag - sin mencionar un en línea generador para obtener el código. ¿Ves cómo todo se une?
La parte más complicada aquí es asegurarse de que los zig-zags estén perfectamente alineados, y para esto, necesitamos agregar un desplazamiento para cada :nth-child(odd) elemento de imagen
.gallery > img {
mask:
conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
100% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y,
conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg)
0% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y;
}
/* we add an offset to the odd elements */
.gallery > img:nth-child(odd) {
--_p: var(--s);
}
.gallery > img:first-child {
mask:
conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
0 calc(50% + var(--_p, 0%))/100% calc(2*var(--s));
}
.gallery > img:last-child {
mask:
conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg)
0 calc(50% + var(--_p, 0%)) /100% calc(2*var(--s));
}Tenga en cuenta el uso de la --_p variable, que volverá a 0% pero será igual a --_s por las extrañas imágenes.
Aquí hay una demostración que ilustra el problema. Pase el cursor para ver cómo el desplazamiento, definido por --_p — está arreglando la alineación.
Además, observe cómo usamos una máscara diferente para la primera y la última imagen como lo hicimos en el ejemplo anterior. Solo necesitamos un zig-zag en el lado derecho de la primera imagen y en el lado izquierdo de la última imagen.
¿Y por qué no los lados redondeados? ¡Vamos a hacerlo!
Sé que el código puede parecer aterrador y difícil de entender, pero todo lo que sucede es una combinación de diferentes trucos que hemos cubierto en este y otros artículos que ya he compartido. En este caso, uso la misma estructura de código que el zig-zag y las formas inclinadas. ¡Compárelo con esos ejemplos y no encontrará ninguna diferencia! Esos son los mismos trucos en mi artículo anterior sobre el efecto zoom. Entonces, estoy usando mi otra escritura y mi generador en línea para obtener el código de la máscara que crea esas formas redondeadas.
Si recuerda lo que hicimos para el zig-zag, habíamos usado la misma máscara para todas las imágenes, pero luego tuvimos que agregar un desplazamiento a las imágenes impares para crear una superposición perfecta. En este caso, necesitamos una máscara diferente para las imágenes impares.
La primera máscara:
mask:
linear-gradient(-90deg,#0000 calc(2*var(--s)),#000 0) var(--s),
radial-gradient(var(--s),#000 98%,#0000) 50% / calc(2*var(--s)) calc(1.8*var(--s)) space repeat;
El segundo:
mask:
radial-gradient(calc(var(--s) + var(--g)) at calc(var(--s) + var(--g)) 50%,#0000 98% ,#000)
calc(50% - var(--s) - var(--g)) / 100% calc(1.8*var(--s))
El único esfuerzo que hice aquí fue actualizar la segunda máscara para incluir la variable de brecha (--g) para crear ese espacio entre las imágenes.
El toque final es arreglar la primera y la última imagen. Como todos los ejemplos anteriores, la primera imagen necesita un borde izquierdo recto mientras que la última necesita un borde derecho recto.
Para la primera imagen, siempre sabemos la máscara que debe tener, que es la siguiente:
.gallery > img:first-child {
mask:
radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}
Para la última imagen, depende de la cantidad de elementos, por lo que importa si ese elemento es :nth-child(odd) or :nth-child(even).
.gallery > img:last-child:nth-child(even) {
mask:
linear-gradient(to right,#0000 var(--s),#000 0),
radial-gradient(var(--s),#000 98%,#0000) left / calc(2*var(--s)) calc(1.8*var(--s)) repeat-y
}
.gallery > img:last-child:nth-child(odd) {
mask:
radial-gradient(calc(var(--s) + var(--g)) at left,#0000 98%,#000) 50% / 100% calc(1.8*var(--s))
}¡Eso es todo! Tres diseños diferentes pero los mismos trucos de CSS cada vez:
- la estructura del código para crear el efecto zoom
- una máscara o clip-path para crear las formas
- una configuración separada para los elementos impares en algunos casos para asegurarnos de que tenemos una superposición perfecta
- una configuración específica para la primera y la última imagen para mantener la forma en un solo lado.
Y aquí hay una gran demostración con todos ellos juntos. Todo lo que necesita es agregar una clase para activar el diseño que desea ver.
Y aquí está el que tiene la implementación de Flexbox.
Terminando
¡Uf, hemos terminado! Sé que hay muchos trucos y ejemplos de CSS entre este artículo y el último, sin mencionar todos los otros trucos a los que he hecho referencia aquí en otros artículos que he escrito. Me tomó tiempo poner todo junto, y no tienes que entender todo a la vez. Una lectura le dará una buena visión general de todos los diseños, pero es posible que deba leer el artículo más de una vez y concentrarse en cada ejemplo para comprender todos los trucos.
¿Te diste cuenta de que no tocamos el HTML en absoluto, aparte quizás de la cantidad de imágenes en el marcado? Todos los diseños que hicimos comparten el mismo código HTML, que no es más que una lista de imágenes.
Antes de terminar, les dejaré un último ejemplo. Es un "versus" entre dos personajes de anime con un efecto de desplazamiento genial.
¿Y usted? ¿Puedes crear algo basado en lo que has aprendido? No necesita ser complejo: imagina algo genial o divertido como lo hice con ese enfrentamiento de anime. Puede ser un buen ejercicio para ti, y podemos terminar con una excelente colección en la sección de comentarios.
