Cómo el efecto de superposiciones de solo CSS con Box-Shadow

Superposiciones de contenido Son una parte destacada del diseño web moderno. Te ayudan ocultar un elemento en una página web, y más tarde - con la aprobación del usuario - revelalo, y muestra información adicional o controles, como botones detrás de ella.

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

En este artículo, vamos a echar un vistazo a cómo añadir superposición de color a las imágenes mediante el uso de CSS puro. Puedes ver el resultado final en la demo a continuación. Desplaza las imágenes para que las superposiciones revelen los pokemons. Aunque esta publicación analiza las imágenes, la técnica que presenta puede aplicarse de manera segura a otros tipos de contenido (como bloques de texto) también.

Evite agregar elementos HTML adicionales

Las superposiciones son creadas frecuentemente por posicionando un elemento HTML adicional con un opacidad valor menor que 1 justo encima del elemento a cubrir. El problema es que esta técnica implica el uso de un extra elemento (o pseudo-elemento) para la superposición.

Si no tiene un tamaño pedante de HTML, tener un elemento adicional para la superposición probablemente no sea un gran problema, ya que lo más probable es que no afecte tanto el ancho de banda de ninguna red. Sin embargo teniendo separar Las reglas de estilo para los elementos y sus superposiciones siguen dañando la legibilidad y el mantenimiento de CSS..

Para mantener su código en orden y no desordenar su resumen HTML, es una mejor opción utilizar una solución solo para CSS.

Crear superposición con sombra de la caja

Entonces, ¿cómo se puede crear realmente una superposición de solo CSS? Con la ayuda del sombra de la caja Propiedad CSS. La sombra de cuadro es perfecta para este trabajo, ya que se trata de una superposición, pero una sombra oscura proyectada sobre un elemento?

La caja-sombra tiene un valor de propiedad llamado recuadro, lo que hace que aparezca la sombra hacia adentro del marco de la caja.

Una sombra de recuadro 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 el todo elemento.

 .caja ancho: 200px; altura: 200px; caja-sombra: verde 0 0 0 100px recuadro;  

Ya que las superposiciones usualmente tener algo de transparencia, Necesitas agregarlo a la sombra de la caja también. Esto se puede hacer usando el rgba () función para el color de la sombra.

los rgb parte de rgba, representa, rojo, verde y azul los valores de los canales de color, mientras que una representa el canal alfa, cual es responsable de la transparencia.

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

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

Crea el código para la demo

Nuestra demo mostrará las imágenes y nombres de diferentes pokemons. Aquí solo crearemos el código para Bulbasaur, el primer pokemon en la demo, ya que los otros están hechos de la misma manera (en Codepen también puedes revisar el código para ellos).

HTML

Para el HTML, solo necesitamos crear una caja A lo que añadiremos todo lo demás con CSS..

CSS

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

Desde el sombra de la caja propiedad puede tomar múltiples valores a fin de que renderizar múltiples sombras, Además de la sombra de superposición, también agregué otras sombras de gris a la .pokemon y .pokemon: flotar Elementos para la estética..

 / * pokemon pictures * / .pokemon width: 200px; altura: 200px; / * Centrar contenido usando flex box * / display: flex; justificar-contenido: centro; alinear-elementos: centro; / * overlay * / box-shadow: 0 0 0 100px inset, 0 0 5px gris; / * transición hover-out * / transición: box-shadow 1s;  / * pokemon names * / .pokemon :: after width: 80%; altura: 80%; bloqueo de pantalla; fuente: 16pt 'bookman old syle'; color blanco; borde: 2px sólido; text-align: center; / * Centrar contenido usando flex box * / display: flex; justificar-contenido: centro; alinear-elementos: centro; / * desplazarse por la transición * / transición: opacidad 1s .5s;  / * muestra la imagen de pokemon al desplazarse * / .pokemon: hover transition: box-shadow 1s; box-shadow: 0 0 0 5px inset, 0 0 5px grey, 0 0 10px grey inset;  / * oculta el nombre de pokemon en hover * / .pokemon: hover :: after transition: opacity .5s; opacidad: 0;  

Cuando el .pokemon los elementos están flotando, su caja-sombra necesita cambiar para revelar la imagen detrás.

Se puede ver que el .pokemon: flotar el selector obtiene una nueva sombra de cuadro que elimina la superposición y el .pokemon: hover :: despues selector oculta el nombre del pokemon usando el opacidad propiedad.

Es posible que también hayas notado la ausencia de valores de color en el cuadro de superposición de sombras en el .pokemon y .pokemon: flotar reglas de estilo. El color de la sombra de la caja de superposición de los pokemons individuales debe especificarse en sus propias reglas de estilo separadas, ya que todos son diferentes entre sí.

Como sombra de la caja no tiene ninguna propiedad a mano, no puedes establecer su color de sombra individualmente con algo como, caja de sombra de color; en su lugar, usamos el color propiedad.

Por defecto, cuando le das un valor para el color propiedad, ese valor es Aplicado para el borde, el contorno y los colores del cuadro de sombra. también. Por lo tanto, simplemente puede utilizar el color Propiedad para agregar color a la caja de sombra..

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

El color de la sombra superpuesta utiliza lo anterior. rgba () Funciona con 0.9 para el valor alfa para hacer la superposición transparente.

Además del color del cuadro de la sombra de la superposición, el CSS anterior también agrega las reglas que son individuales para cada pokemon, la imagen como imagen de fondo y el nombre.

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