Sombras múltiples (box-shadow)
Bordes redondeados (border-radius) Bordes redondeados en los vértices Sombras (box-shadow) Sombras múltiples (box-shadow) Sombras interiores Sombras con transparencias Sombras de texto Rotación Punto de origen Escalado Translación Torcer (transform:skew) Múltiples transformaciones en forma simultanea Opacidad (opacity) Opacidad (color) Múltiples columnas (column-count) Múltiples columnas dinámicas (column-width) Múltiples columnas y su separación (column-gap) Múltiples columnas y línea separadora (column-rule) Importar una fuente no disponible en el navegador (@font-face) Imágenes de fondo (background-image) Imágenes de fondo en diferentes posiciones (background-position) Imágenes de fondo (background-size) Imágenes de fondo (background-origin) Transiciones de una propiedad (transition) Transiciones de múltiples propiedades (transition) Transiciones (funciones de transición) Transiciones (tiempo de demora en iniciar la transición) Transiciones (otra sintaxis para hacer lo mismo) Animaciones (sintaxis básica) Animaciones (animation-iteration-count y animation-direction) Animaciones (animation-timing-function y animation-delay) Animaciones (animation-play-state) Animaciones (definición de más de 2 keyframes)

Sombras múltiples (box-shadow)

Se utiliza para proyectar sombras (a menudo llamadas "Sombras paralelas", como en Photoshop) de elementos. A continuación, se muestra un ejemplo con la mayor compatibilidad posible con el navegador:

Todo lo que sabemos acerca de text-shadowstar puede ser aplicado a box-shadow. Es como si fuera la misma propiedad con otro nombre. Sin embargo hay algunos toques especiales. Empecemos con la sintaxis.


box-shadow: desplazamiento horizontal  desplazamiento vertical  desenfoque  extension  color inset;

La extensión acepta valores negativas como en el siguiente ejemplo donde la #caja3 tiene el mismo estilo que la #caja2 pero con una extensión negativa (-6px) de la sombra.

#caja1{box-shadow: 0px 0px 5px 1px black;}

Caja 1


La extensión acepta valores negativas como en el siguiente ejemplo donde la #caja3 tiene el mismo estilo que la #caja2 pero con una extensión negativa (-6px) de la sombra.


#caja2{box-shadow: 0px 10px 10px black;}
#caja3{box-shadow: 0px 10px 10px -6px black;}

Caja 2


Caja 3



Con la propiedad box-shadow podemos aplicar múltiples sombras a un objeto. Para esto debemos aplicar la siguiente sintaxis:

box-shadow: [desplazamiento en x] [desplazamiento en y] [desenfoque] [color] ,
[desplazamiento en x] [desplazamiento en y] [desenfoque] [color] etc.

Por ejemplo si queremos que aparezca una sombra de color rojo en la parte superior izquierda y una sombra verde en la parte inferior derecha podemos aplicar lo siguiente:

#recuadro1{
box-shadow: -30px -30px 20px #f00,
30px 30px 20px #0f0;
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}
Recuadro 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,