Efecto superposición con box-shadow en CSS3

Superposiciones de contenido son una parte importante del diseño web moderno. Ellos le ayudan a ocultar un elemento en una página web, y más tarde - con la aprobación del usuario - revelarlo y muestra información ni controles adicionales, tales como botones detrás de él.

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

En este Tutorial, vamos a echar un vistazo a cómo añadir transparencias de color a las imágenes mediante el uso de CSS puro. Puede ver el resultado final en la demostración a continuación. Asomar las imágenes que componen las superposiciones revelan el logo de pokemons. Aunque este Tutorial En Linea analiza las imágenes, la técnica se presenta se puede aplicar con seguridad a otros tipos de contenido (como bloques de texto), así.

Evitar la adición de elementos HTML extra

Las superposiciones con frecuencia creados por la posición del lado de un elemento HTML adicional con un opacity valor inferior a 1 justo encima del elemento a ser cubierto. El problema es que esta técnica implica el uso de un elemento adicional (o pseudo-elemento) para la superposición.

Si usted no es un tamaño HTML pedante, que tiene un elemento adicional para la superposición probablemente no es un gran problema, ya que lo más probable es que no va a gravar el ancho de banda de cualquier red que mucho. Sin embargo, tener distintas reglas de estilo para los elementos y sus superposiciones sigue perjudicando a la legibilidad del CSS y la mantenibilidad. 

Para mantener su código en orden y no echar a perder su contorno HTML para arriba, es una mejor opción de utilizar una solución CSS-solamente.

Crear superposición con box-shadow

Entonces, ¿cómo se puede realmente crear una superposición de sólo CSS? Con la ayuda de la propiedad de CSS box-shadow. La caja-sombra es perfecto para este trabajo ya que lo que es una superposición pero una sombra oscura sobre un elemento ?

La caja-sombra tiene un valor de propiedad llamada inset, lo que hace que aparezca una sombra hacia el interior del bastidor de la caja.

En un recuadro box-shadow con un tamaño medio de sombra o más de la mitad de la anchura y la altura del elemento, crea una sombra que cubre la totalidad de elemento

.box {
    width: 200px;
    height: 200px;
    box-shadow:  green 0 0 0 100px inset;
}

Otro Ejemplo

CSS

html {
      margin: 40px;
    }
    #simple p {
      margin: 30px 40px;
      width: 80px;
      height: 30px;
      border: 1px solid #999;
      float: left;
    }
    #p1 {
      -moz-box-shadow: 5px 3px black;
      -webkit-box-shadow: 5px 3px black;
      box-shadow: 5px 3px black;
    }
    #p2 {
      -moz-box-shadow: 3px 3px 5px black;
      -webkit-box-shadow: 3px 3px 5px black;
      box-shadow: 3px 3px 5px black;
    }
    #p3 {
      -moz-box-shadow: 0 0 5px 5px black;
      -webkit-box-shadow: 0 0 5px 5px black;
      box-shadow: 0 0 5px 5px black;
}

HTML

<div id="simple">
         <p id="p1">
      <p id="p2">
      <p id="p3">
</div>

Mediante la asignación de un valor entre 0 y 1 para el canal alfa del valor de color RGBA de la sombra, se puede crear una capa semitransparente.

Crear el código para la demostración

Nuestra demostración mostrará las imágenes y los nombres de los diferentes pokemons. Aquí sólo a crear el código para Bulbasaur, el primer pokemon en la demo ya que los otros se hacen de la misma manera (en Codepen se puede extraer el código para ellos también).

HTML

Para el HTML, sólo tenemos que crear un cuadro al que vamos a añadir todo lo demás con CSS.

<div id="bulbasaur" class="pokemon"></div>

CSS

En el CSS a continuación, los elementos .pokemon de visualización de las imágenes de Pokémon, y loselementos de visualización de las imágenes de Pokémon, y los pseudo-elementos .pokemon::after llevan el nombre de los pokemon.

.pokemon {
  width: 200px;
  height: 200px;
  /* center content using flex box */
  display: flex;
  justify-content: center;
  align-items: center;
  /* overlay */
  box-shadow: 0 0 0 100px inset, 0 0 5px grey;
  /* hover out transition */
  transition: box-shadow 1s;
  float: left;
  margin: 10px;
}

/* pokemone names */

.pokemon::after {
  width: 80%;
  height: 80%;
  display: block;
  white-space: pre;
  font: 15pt 'sigmar one';
  color: white;
  border: 2px solid;
  text-align: center;
  /* center content using flex box */
  display: flex;
  justify-content: center;
  align-items: center;
  /* hover out transition */
  transition: opacity 1s .5s;
}

/* reveal pokemone picture on hover */

.pokemon:hover {
  box-shadow: 0 0 0 5px inset, 0 0 5px grey, 0 0 10px grey inset;
  transition: box-shadow 1s;
}

/* hide pokemone name on hover */

.pokemon:hover::after {
  opacity: 0;
  transition: opacity .5s;
}

Cuando los elementos .pokemon se cierra, su box-shadow necesita cambiar para revelar la imagen detrás. Se puede ver que el selector .pokemon:hover ayuda a crear una nueva caja-sombra que elimina la superposición, y el selector .pokemon:hover::after oculta el nombre del pokemon mediante el uso de la propiedad opacity.

Es posible que también ha notado la ausencia de valores de color en la superposición de caja-sombras de los estilos .pokemon y .pokemon:hover. La superposición de color box-shadow de los pokemons individuales se tiene que especificar en sus propias reglas de estilo separadas, ya que son todos diferentes unos de otros.

Como no tiene ninguna escritura a mano la propiedad, no se puede establecer el color de sombra de forma individual, en vez - usamos la propiedad box-shadow box-shadow-color color.

Por defecto, cuando se le da un valor para la propiedad color, es que el valor aplicado a la frontera, el contorno y los colores de caja de sombra también. Por lo tanto, sólo tiene que utilizar la propiedad color para añadir color a la caja-sombra.

#bulbasaur {background-image: url(https://tutorialesenlinea.es/uploads/posts/2019-03/1552149660_bulbasaur.jpg);color: rgba(71, 121, 94, .9);}
#bulbasaur::after {content: 'Bulbasaur';}

Y eso es todo, estamos listos con nuestro superposición de imágenes CSS solo color. Echar un vistazo a el código de todos los pokemons en la pluma a continuación. Ver resultado