Cómo superponer CSS-Only Efecto con Box-Shadow

Las superposiciones de contenido son una parte prominente del diseño web moderno. Le ayudan a ocultar un elemento en una página web y luego, con la aprobación del usuario, lo revelan y muestran información o controles adicionales, como botones detrás de él.

Una superposición típica es semitransparente, con un color de fondo sólido (generalmente negro), y hay texto o botones para que los usuarios vean o interactúen. Después de que se produce la interacción (hacer clic o desplazarse), la superposición se elimina y revela el contenido debajo de ella.

En este artículo, veremos cómo agregar una superposición de colores a las imágenes mediante CSS puro. Puede ver el resultado final en la demostración a continuación. Pase las imágenes para hacer que las superposiciones revelen los pokemons. Aunque esta publicación trata las imágenes, la técnica que presenta también se puede aplicar con seguridad a otros tipos de contenido (como bloques de texto).

Evite agregar elementos HTML adicionales

Las superposiciones se crean con frecuencia colocando un elemento HTML adicional con un valor de opacity inferior a 1 justo encima del elemento que se va a cubrir . El problema es que esta técnica implica el uso de un elemento extra (o pseudo-elemento) para la superposición.

Si no eres un pedante de HTML, tener un elemento extra para la superposición probablemente no sea un gran problema, ya que lo más probable es que no gravará tanto el ancho de banda de una red. Sin embargo, tener reglas de estilo separadas para los elementos y sus superposiciones aún perjudica la legibilidad y mantenibilidad de CSS.

Para mantener su código en orden y no alterar su esquema HTML, es una mejor opción usar una solución exclusiva de CSS.

Crear superposición con box-shadow

Entonces, ¿cómo se puede crear una superposición CSS-only? Con la ayuda de la propiedad de box-shadow CSS. La sombra de caja es perfecta para este trabajo, ya que ¿qué es una superposición sino una sombra oscura proyectada sobre un elemento ?

La sombra de cuadro tiene un valor de propiedad llamado inset, que hace que la sombra aparezca hacia adentro del marco del cuadro .

Una sombra de cuadro insertada con un tamaño de sombra de la mitad o más de la mitad del ancho y la altura del elemento, crea una sombra que cubre todo el elemento .

 .box {ancho: 200px; altura: 200px; caja-sombra: verde 0 0 0 100px inserción; } 

Como las superposiciones suelen tener cierta transparencia, también debe agregarlas a la sombra de la caja. Esto se puede hacer utilizando la función rgba() para el color de sombra .

La parte rgb de rgba, representa los valores del canal de color rojo, verde y azul, mientras que a representa el canal alfa, que es responsable de la transparencia .

Para el canal alfa, un valor de 1 crea un color opaco, mientras que 0 crea un color completamente transparente .

Al asignar un valor entre 0 y 1 al canal alfa del valor de color rgba de la sombra de cuadro, puede crear una superposición semitransparente .

Crea el código para la demostración

Nuestra demostración mostrará las imágenes y los nombres de diferentes pokemons. Aquí solo crearemos el código para Bulbasaur, el primer pokemon en la demostración, ya que los demás se hacen de la misma manera (en Codepen también puedes consultar el código para ellos).

HTML

Para el HTML, solo necesitamos crear un cuadro al que agregaremos todo lo demás con CSS.

CSS

En el CSS a continuación, los elementos .pokemon muestran las imágenes pokemon, y los pseudo-elementos .pokemon::after llevan el nombre del pokemon.

Dado que la propiedad box-shadow puede tomar múltiples valores para renderizar múltiples sombras, además de la sombra superpuesta, también agregué otras sombras de gris a los elementos .pokemon y .pokemon:hover para la estética.

 / * imágenes de pokemon * / .pokemon {ancho: 200px; altura: 200px; / * contenido central usando flex box * / display: flex; justify-content: center; alinear elementos: centro; / * overlay * / box-shadow: 0 0 0 100px inserción, 0 0 5px gris; / * transición al pasar el ratón * / transición: box-shadow 1s; } / * nombres de pokemon * / .pokemon :: after {ancho: 80%; altura: 80%; bloqueo de pantalla; fuente: 16pt 'bookman old syle'; color blanco; borde: 2px sólido; text-align: center; / * contenido central usando flex box * / display: flex; justify-content: center; alinear elementos: centro; / * transición hacia fuera * / transición: opacidad 1s .5s; } / * revela la imagen de pokemon en el vuelo estacionario * / .pokemon: hover {transition: box-shadow 1s; caja-sombra: 0 0 0 5px inserción, 0 0 5px gris, 0 0 10px inserción gris; } / * ocultar nombre de pokemon en hover * / .pokemon: hover :: after {transition: opacity .5s; opacidad: 0; } 

Cuando los elementos .pokemon están .pokemon, su sombra de cuadro debe cambiar para revelar la imagen detrás.

Puede ver que el selector .pokemon:hover obtiene una nueva sombra de cuadro que elimina la superposición, y el .pokemon:hover::after oculta el nombre del pokemon utilizando la propiedad de opacity .

También es posible que haya notado la ausencia de valores de color en las sombras de cuadro superpuestas en las reglas de estilo .pokemon y .pokemon:hover . El color superpuesto de la sombra de cuadro de los pokemons individuales debe especificarse en sus propias reglas de estilo independientes, ya que son todas diferentes entre sí.

Como box-shadow no tiene ninguna propiedad a mano, no puede establecer su color de sombra individualmente con algo así como, box-shadow-color ; en cambio, usamos la propiedad de color .

De forma predeterminada, cuando le da un valor a la propiedad de color, ese valor se aplica también para el borde, el contorno y los colores de sombreado de caja . Entonces, simplemente puede usar la propiedad de color para agregar color a la sombra de caja.

 #bulbasaur {background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * valor de color utilizado para color de sombreado de caja * / color: rgba (71, 121, 94, 0.9); } #bulbasaur :: after {/ * nombre pokemon * / contenido: 'Bulbasaur'; } 

El color de la sombra de superposición utiliza la función rgba() mencionada rgba() con 0.9 para el valor alfa para que la superposición sea transparente.

Además del color de la sombra de cuadro superpuesta, el CSS anterior también agrega las reglas que son individuales para cada pokemon: la imagen como imagen de background-image y el nombre.

Y eso es todo, estamos listos con nuestra superposición de imágenes de color solo CSS. Echa un vistazo al código de todos los pokemons en el lápiz a continuación.