Las superposiciones de contenido son una parte importante de cómo se crean los sitios web en la actualidad. Te permiten Cómo aplicar un efecto de superposición solo CSS con Box-Shadow, mostrarlo nuevamente con más información o controles detrás, como botones.
Una superposición típica es semitransparente y tiene un color de fondo sólido, que suele ser negro. También tiene texto o botones que los usuarios pueden ver o usar. Después de la interacción (hacer clic o pasar el mouse), la superposición desaparece y se muestra el contenido debajo.
En este artículo, veremos cómo usar CSS puro para agregar una superposición de color a una imagen. En la demostración a continuación, puede ver cómo resultó todo. Mueva el mouse sobre las imágenes para ver los Pokémon en las superposiciones. Aunque esta publicación trata sobre imágenes, la técnica que muestra se puede usar de manera segura con otros tipos de contenido, como bloques de texto.
Cómo aplicar un efecto de superposición solo de CSS con Box-Shadow
Crear sombras en capas con CSS box-shadow
Puedes apilar varias sombras una encima de otra separando sus valores con comas. Esta técnica se puede usar para crear sombras interesantes que se mezclan suavemente con la página. Tenga en cuenta que el valor de dispersión no se agrega; no es realmente necesario en este caso, pero en última instancia, depende de usted decidir cómo se ve la sombra del cuadro.
Si configuramos el radio de desplazamiento y desenfoque en 0px y agregue un valor de extensión a una sombra, agregaremos un borde al cuadro. Dado que este borde es técnicamente una sombra porque el cuadro no ocupa espacio adicional en el elemento principal.
Crear sombras de neón con CSS box-shadow
Las sombras de la vida real suelen ser negro o gris, con cantidades variables de opacidad. Pero, ¿y si las sombras tuvieran colores?
En el mundo real, obtienes sombras coloreadas cambiando el color de la fuente de luz. No existe una fuente de luz”real”equivalente al cambio en un sitio web, por lo que obtienes este efecto de neón cambiando el valor del color en la sombra del cuadro.
Creación de sombras neumórficas con la sombra del cuadro CSS
Este efecto es único y visualmente agradable. Provino del skeuomorphism, que intentaba replicar objetos exactamente como aparecerían en la vida real. Hay algunos ejemplos en el artículo vinculado sobre skeuomorphism
Los primeros dos efectos que necesitamos crear tratan con componentes web planos que parecen flotar sobre la página y proyectan sombras en el fondo. Este efecto hace que estos componentes parezcan extruidos de la página.
Preguntas frecuentes
¿Cómo se superpone un cuadro en CSS?
Especifique el ancho y el alto del”contenedor”clase. Establezca la posición en”relativa”y agregue la propiedad de margen. Establezca tanto el ancho como el alto de la clase de”caja”en”100%”. Especifique la posición con el valor”absoluto”…. Aplique estilo a la clase de”superposición”utilizando las propiedades de índice z, margen y fondo.
¿Cómo obtengo una sombra de cuadro solo en el CSS inferior?
Para mostrar la sombra en la parte inferior de la imagen, se usa la propiedad”box-shadow”. Para este propósito, offset-x se establece como”0″, offset-y es cualquier valor positivo, y también se establece el color que desea mostrar.
¿Admite CSS la sombra de cuadro?
La propiedad CSS box-shadow agrega efectos de sombra alrededor del marco de un elemento. Puede establecer varios efectos separados por comas. La sombra de un cuadro se describe mediante compensaciones X e Y en relación con el elemento, el desenfoque y el radio de extensión, y el color.