» » CSS - Efecto superposición con box-shadow

CSS - Efecto superposición con box-shadow

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 los 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 posicion 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 adicional elemento (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 CSS legibilidad y 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 box-shadow propiedad CSS. 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;
	}
	

CSS - Efecto superposición con box-shadow

sombra cuadro que cubre todo el elemento

Otro Ejemplo:

CSS - Efecto superposición con box-shadow


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>
	
 

Desde superposiciones generalmente tienen algo de transparencia , es necesario añadirlo a la sombra caja también. Esto se puede hacer mediante el uso de la rgba() función para color de la sombra.


La rgbporción de RGBA, representa, los valores de canal, de color verde y azul rojos, mientras que arepresenta 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 de totalmente transparente.


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


Crear el Código para la demostración

CSS - Efecto superposición con box-shadow


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 = clase "Bulbasaur" = "pokemon"> </ div>


CSS


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


Dado que la box-shadow propiedad puede tomar varios valores con el fin de procesar varios sombras , además de la sombra de superposición, también agregué otras sombras de gris para el .pokemon.pokemon:hoverelementos para la estética.

 

 
.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 .pokemonse cernían elementos, su box-shadow necesita cambiar para revelar la imagen detrás.


Se puede ver que el .pokemon:hover selector de crear una nueva caja-sombra que elimina la superposición, y el .pokemon:hover::after selector oculta el nombre del pokemon mediante el uso de la opacitypropiedad.


Es posible que también ha notado la ausencia de valores de color en la superposición caja-sombras en las .pokemon.pokemon:hover estilo reglas. 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 con algo como, ; en vez - usamos la propiedad.box-shadow box-shadow-colorcolor


Por defecto, cuando se le da un valor para la colorpropiedad, 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 colorpropiedad para añadir color a la caja-sombra.


#bulbasaur {
	  background-image: url(https://vignette4.wikia.nocookie.net/pokemon/images/2/21/001Bulbasaur.png/revision/latest/scale-to-width-down/200?cb=20140328190757);
	  color: rgba(71, 121, 94, .9);
	}
	#bulbasaur::after {
	  content: 'Bulbasaur';
	}
	

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


Aparte del color de la superposición de caja de sombra, el CSS anterior también añade las reglas que son individuales para cada pokemon - la imagen como background-imagey el nombre.


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. (Extraído Desde hongkiat.com)


Categorias: CSS3 / Diseño Web / Noticias / Tutorial / webmasters
Añadir Comentario