Spanish (Español) translation by Carlos (you can also view the original English article)
En este tutorial, tomaremos un grupo de enlaces de miniaturas ordinarias y los convertiremos en una galería de cuadriculas CSS responsiva con un efecto desenfocado al colocar el puntero del mouse (hover). ¡También utilizaremos un buen truco de CSS para asegurarnos de que los usuarios de pantallas táctiles no se pierdan!
Aquí está lo que vamos a crear:
Un poco de contexto
Hace poco, Rachel McCollin escribió un tutorial explicando cómo añadir una galería de enlaces de miniaturas a los temas de WordPress.
Los enlaces actúan como navegación para las páginas secundarias de cualquier página en la que el usuario se encuentre (o la página que especifiques) y el plugin resultante genera algo parecido a esto:
Usando el marcado generado por el plugin de Rachel, vamos a hacer lo siguiente:
- Organizar las miniaturas utilizando las cuadrículas de CSS (CSS Grid), para proporcionarnos una galería responsiva.
- Crear un efecto de hover (al colocar el puntero del mouse) utilizando los filtros y las transiciones de CSS
- Utilizar de una manera ingeniosa los media queries de CSS para asegurarnos de que los usuarios de pantallas táctiles puedan ver cada título de la miniatura, aun sin pasar el puntero por encima.
1. Cambia el marcado (un poco)
Veamos rápidamente el marcado generado por el código de Rachel. Cuando se limpia se ve así:
1 |
<div class="child-page-listing"> |
2 |
|
3 |
<h2>Our Locations</h2> |
4 |
|
5 |
<article class="location-listing"> |
6 |
<a class="location-title" href="#">San Francisco</a> |
7 |
<div class="location-image"> |
8 |
<a href="#"> |
9 |
<img src="image.jpg" alt="san francisco"> |
10 |
</a>
|
11 |
</div>
|
12 |
</article>
|
13 |
|
14 |
<!-- more articles -->
|
15 |
|
16 |
</div>
|
Tenemos un <div> principal, que contiene un encabezado <h2> y unos elementos <article>. Cuando estemos utilizando CSS Grid primero definimos un contenedor de cuadrícula. En este caso, podríamos utilizar el <div> principal, pero eso haría que cada elemento secundario directo, incluido el <h2>, sean un elemento de la cuadrícula, por lo que
debemos cambiar un poco las cosas.
Envolveremos todos los elementos <article> en otro <div> (puedes utilizar el elemento que creas más conveniente) al que con imaginación le daremos la clase grid-container. Usaremos este pen inicial como base.
2. Cuadrículas CSS responsivas, en tres líneas
Con solo unas cuantas reglas podemos convertir nuestras miniaturas en una cuadrícula:
1 |
.grid-container { |
2 |
display: grid; |
3 |
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
4 |
grid-gap: 1em; |
5 |
}
|
Estas sencillas líneas aquí son: display: grid; (que convierte a todos los elementos secundarios directos en elementos de la cuadrícula y los establece) y grid-gap: 1em; (que define nuestros márgenes).
La ligera complejidad viene del valor que hemos dado a la propiedad grid-template-columns, que define nuestras columnas. Normalmente podrías esperar ver algo como repeat(3, 200px) que nos daría tres columnas de 200px. En este caso hemos utilizado la palabra clave auto-fill para repeat(), y luego algunos valores. Esto nos da tantas columnas con un mínimo de 300px y un máximo de 1fr como quepan en el contenedor de la cuadrícula.
¡Cambia el tamaño de la ventana de tu navegador y ve cómo se comporta!
Un último detalle que necesitarás añadir:
1 |
img { |
2 |
width: 100%; |
3 |
height: auto; |
4 |
}
|
Esto asegurará que las imágenes llenen sus contenedores de manera adecuada (particularmente necesario para el uso con demostración de Rachel, ya que necesitamos sobrescribir las propiedades de ancho y alto en línea de las salidas de WordPress).
3. Efecto hover (al colocar el puntero del mouse)
Vamos a utilizar los títulos como superposición para las miniaturas, revelándolas al colocar el puntero del mouse. También vamos a dar a las imágenes un efecto rojo, y un ligero desenfoque para ayudar a la legibilidad del texto superpuesto.
Superpón el título
Para superponer el título necesitamos posicionarlo, así que empezaremos haciendo la posición del artículo relativa (position: relative;) y la posición del título absoluta (position: absolute;) . También le daremos un fondo rojo y haremos que llene el espacio disponible:
1 |
.location-listing { |
2 |
position: relative; |
3 |
}
|
4 |
|
5 |
.location-title { |
6 |
position: absolute; |
7 |
top: 0; |
8 |
left: 0; |
9 |
height: 100%; |
10 |
width: 100%; |
11 |
background: rgba(90,0,10,0.4); |
12 |
}
|
¡Buen comienzo!
Hay una o dos cosas que mejorar, incluyendo ese espacio extra en la parte inferior (el título es ligeramente más grande que la miniatura). Esto puede resolverse eliminando cualquier line-height en el contenedor de la imagen:
1 |
.location-image { |
2 |
line-height: 0; |
3 |
}
|
Estiliza el título
Algunos estilos tipográficos mejorarán la apriencia de nuestro título, y tres líneas de flexbox magic lo alinearán centralmente por nosotros:
1 |
.location-title { |
2 |
position: absolute; |
3 |
top: 0; |
4 |
left: 0; |
5 |
height: 100%; |
6 |
width: 100%; |
7 |
background: rgba(90,0,10,0.4); |
8 |
|
9 |
/* typographic styles */
|
10 |
color: white; |
11 |
font-size: 1.5em; |
12 |
font-weight: bold; |
13 |
text-decoration: none; |
14 |
|
15 |
/* position the text centrally*/
|
16 |
display: flex; |
17 |
align-items: center; |
18 |
justify-content: center; |
19 |
}
|
Mucho mejor:
Oculta el título
Ahora vamos a ocultar el título eliminando su opacidad para que solo podamos verlo al posicionar el puntero del mouse. Un par de reglas más debajo de las que ya hemos añadido a nuestro .location-title deberían efectuarlo:
1 |
/* hide the title by default */
|
2 |
opacity: 0; |
3 |
transition: opacity .5s; |
Aquí también establecemos una regla transition para que cuando recuperemos la opacidad ocurra de manera gradual (en el transcurso de 0,5 segundos). Vamos a restablecerla ahora:
1 |
.location-listing:hover .location-title { |
2 |
opacity: 1; |
3 |
}
|
¡Excelente! Ahora nuestro título aparece de nuevo al colocar el puntero del mouse:
Línea desenfocadas
Ya hemos creado un efecto de hover con una excelente apariencia, pero llevemos las cosas un paso más allá, ¿de acuerdo? También añadamos un filtro de desenfoque a la imagen. Empezaremos ajustando el filtro de desenfoque a un estado normal, para tener algo desde donde iniciar la transición. Luego desenfocaremos las cosas en 2px para el estado de hover (haz este número tan extremo como desees, pero creo que 2px nos da un buen efecto visual):
1 |
.location-image img { |
2 |
filter: blur(0px); |
3 |
transition: filter 0.3s ease-in; |
4 |
}
|
5 |
|
6 |
.location-listing:hover .location-image img { |
7 |
filter: blur(2px); |
8 |
}
|
Esto es lo que nos da:
Un par de aspectos a tener en cuenta:
- El título ha desaparecido porque el navegador ahora muestra el gráfico desenfocado en la parte superior.
- El efecto desenfocado se ve bien, pero también nos da un borde borroso (podemos hacerlo mejor).
Arreglar el título oculto es tan sencillo como añadir z-index: 1; a .location-title.
Arreglar el borde borroso es un poco más complicado. Para empezar, escalamos la imagen para hacerla un poco más grande, luego establecemos overflow: hidden; en el contenedor de la imagen (.location-listing) de manera que cuando la imagen más grande se desenfoque sus bordes se recorten de manera eficaz . Aquí están las propiedades terminadas para los dos elementos en cuestión:
1 |
.location-image img { |
2 |
filter: blur(0px); |
3 |
transition: filter 0.3s ease-in; |
4 |
transform: scale(1.1); |
5 |
}
|
6 |
|
7 |
.location-listing { |
8 |
position: relative; |
9 |
overflow: hidden; |
10 |
}
|
La regla transform: scale(1.1); escala nuestra imagen en todas las direcciones a 1.1 (donde 1.0 mantendría las cosas exactamente del mismo tamaño). Aquí está el resultado mucho más ordenado:
4. El problema con las pantallas táctiles
¡Así que ahí la tenemos! Una atractiva cuadrícula de imágenes con un efecto desenfocado al colocar el puntero del mouse en cada miniatura. Lo único es que los títulos están ocultos a cualquiera que no pueda colocar o pasar el puntero del mouse por encima de las imágenes (un buen número de tabletas y teléfonos inteligentes no emulan el estado hover con un «apretón» prolongado), lo cual no es muy accesible.
Por suerte, CSS tiene algunas media queries de interacción muy útiles que nos pueden ayudar (y también gozan de un soporte para navegadores bastante decente). Estas «queries» detectarán el mecanismo de entrada de un navegador –la calidad del dispositivo señalador, la capacidad para el evento hover y algunas otras definiciones especiales– de modo que podamos determinar con bastante precisión si nuestras miniaturas se están viendo en un dispositivo de pantalla táctil.
Tomemos esta media query como ejemplo (hace exactamente lo que podrías esperar):
1 |
@media (hover: none) { } |
Dentro de estas llaves curvas pondríamos los estilos que deseemos aplicar a un navegador que no pueda manejar :hover. Hagámoslo, especificaremos que para los dispositivos en los que el evento hover es imposible, o al menos inconveniente, la imagen en miniatura siempre estará desenfocada y el título siempre será visible:
1 |
/* for touch screen devices */
|
2 |
@media (hover: none) { |
3 |
.location-title { |
4 |
opacity: 1; |
5 |
}
|
6 |
.location-image img { |
7 |
filter: blur(2px); |
8 |
}
|
9 |
}
|
Mira:
Nota: Como se mencionó, el soporte a esto es bastante moderado, pero las discusiones sobre la implementación de las media queries de interacción todavía están en curso. Hay una buena posibilidad de que esta especificación cambie, o que se eliminen partes.
Conclusión
¡Y hemos terminado! Gracias por seguirme, espero que hayas aprendido una o dos cosas y que hayas disfrutado jugando con CSS (¿quién no lo disfruta?). Aquí está un vistazo más a la demostración final: ¡disfruta añadiéndola a los archivos del tema creado por Rachel en la primera parte!
Lecturas adicionales
