Sombra de caja CSS | Programar Plus

0

Se utiliza para proyectar sombras en elementos a nivel de bloque (como divs).

.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}
  1. El desplazamiento horizontal de la sombra, positivo significa que la sombra estará a la derecha del cuadro, un desplazamiento negativo colocará la sombra a la izquierda del cuadro.
  2. El desplazamiento vertical de la sombra, uno negativo significa que la sombra del cuadro estará encima del cuadro, uno positivo significa que la sombra estará debajo del cuadro.
  3. El radio de desenfoque (opcional), si se establece en 0, la sombra será nítida, cuanto mayor sea el número, más borrosa será.
  4. El radio de propagación (opcional), los valores positivos aumentan el tamaño de la sombra, los valores negativos disminuyen el tamaño. El valor predeterminado es 0 (la sombra tiene el mismo tamaño que el desenfoque).
  5. Color

Ejemplo

Sombra interior

.shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

Ejemplo

Sombra de caja de Internet Explorer

Necesitas elementos extra …

<div class="shadow1">
	<div class="content">
		Box-shadowed element
	</div>
</div>
.shadow1 {
	margin: 40px;
	background-color: rgb(68,68,68); /* Needed for IEs */

	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1;
}
.shadow1 .content {
	position: relative; /* This protects the inner element from being blurred */
	padding: 100px;
	background-color: #DDD;
}

Solo un lado

Usando un radio de extensión negativo, puede apretar la sombra de una caja y solo empujarla por un borde de la caja.

.one-edge-shadow {
	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 6px -6px black;
}

Relacionado

  • CSS3: valor de propagación y sombra de cuadro solo en un lado
  • Documentos de Mozilla
  • Múltiples fronteras con box-shadow.