Todo lo que necesita saber sobre CSS3 Box Shadow

En artículos anteriores, hemos analizado las sombras de texto y los efectos de borde para nuestros elementos de nivel de bloque, pero ahora es el momento de ver qué efectos de sombra de cuadro podemos crear en nuestros elementos de nivel de bloque con CSS3.

Un elemento de nivel de bloque es cualquier elemento que tiene estructura y diseño. El elemento de nivel de bloque más común es un DIV, aunque casi cualquier elemento puede convertirse en un bloque usando display:block.

La propiedad CSS box-shadow nos brinda una enorme variedad de opciones para crear efectos de sombra tanto dentro como fuera del elemento.

La sintaxis es la siguiente (todo en una línea):

box-shadow:
inset xPosition yPosition blurSize spreadSize color;

Dónde:

• recuadro (opcional) si se incluye, la sombra del cuadro existe dentro del cuadro. Si se omite, la sombra del cuadro existe fuera del cuadro.
• xPosición es el desplazamiento horizontal de la sombra del cuadro en relación con el elemento de nivel de bloque.
• yPosición es el desplazamiento vertical de la sombra del cuadro en relación con el elemento de nivel de bloque.
• tamaño de desenfoque (opcional) es el tamaño del desenfoque de las sombras.
• Tamaño extendido (opcional) es el tamaño de la extensión de las sombras.
• color es el valor del color, y puede ser cualquiera de los formatos de color habituales: hexadecimal, rgb, rgba, hsl, hsla o un color con nombre.

Suponiendo que tuviéramos un DIV en nuestra página con la clase myElement, podríamos crear una sombra de cuadro simple en ese elemento usando el código:

.myElement {
    box-shadow:2px 2px 2px #666;
}

En el fragmento de código anterior, estamos configurando las posiciones x e y de la sombra en 2 píxeles para crear una sombra en la parte inferior derecha. También configuramos el tamaño de desenfoque en 2 píxeles y el color en #666 (gris).

Si deseáramos que la sombra fuera a la parte superior izquierda, en lugar de a la parte inferior derecha, simplemente usamos valores negativos para la posición de la sombra x e y.

.myElement {
    box-shadow:-2px -2px 2px #666;
}

Usando los valores xPosition y yPosition sin desenfoque, podemos crear una sombra de bloque con un desplazamiento, así:

.myElement {
    box-shadow:2px 2px 0 #666;
}

Si desea crear una sombra de cuadro alrededor del elemento, no necesita crear cuatro sombras de cuadro. En su lugar, use spreadSize para crear una sombra de bloque alrededor del elemento, así:

.myElement {
    box-shadow:0 0 0 2px #666;
}

¿Quieres que tu sombra de bloque se vea borrosa? ¡No hay problema!

.myElement {
    box-shadow:0 0 5px 2px #666;
}

Si desea que su sombra aparezca dentro de su elemento, use la palabra clave recuadro. Los números positivos harán que la sombra aparezca a la izquierda (en la posición x) y arriba (en la posición y).

.myElement {
    box-shadow:inset 2px 2px 2px #000;
}

Mientras que los números negativos harán que la sombra aparezca en el borde derecho e inferior.

.myElement {
    box-shadow:inset -2px -2px 2px #000;
}

Hagamos algo útil con el recuadro. ¿Alguna vez quisiste crear un botón con un efecto de brillo? ¡Con box shadow, es fácil! El siguiente código llena la mitad del botón con un color diferente, con un simple desenfoque en el medio.

.myElement {
    box-shadow:inset 0 25px 2px #92baf4;
}

De nuevo, puedes rellenar tu sombra desde abajo para crear un efecto en la dirección opuesta.

.myElement {
    box-shadow:inset 0 -25px 2px #92baf4;
}

Al igual que la sombra de texto, no está restringido a una sola sombra. Usando una coma, puede crear múltiples sombras. Aquí, hemos creado una sombra tanto dentro como fuera de la caja.

.myElement {
    box-shadow:2px 2px 2px #666, inset 0 -25px 2px #92baf4;
}

Usando border-radius del último blog, podemos combinar los dos para crear un botón más redondeado. Esto se ve mejor, pero la sombra tendrá el mismo radio que la caja.

.myElement {
    border-radius:8px;
    box-shadow:2px 2px 2px #666, inset 0 25px 0 #92baf4;
}

Afortunadamente, hay una manera de resolver esto. Al agregar un diferencial negativo, podemos reducir el efecto de radio de borde. Es posible que deba jugar con el valor negativo para obtener la configuración adecuada para usted.

.myElement {
    border-radius:8px;
    box-shadow:2px 2px 2px #666, inset 0 60px 0 -36px #92baf4;
}

Entonces, ¿qué navegadores admiten box-shadow? ¡Afortunadamente más que aquellos que admiten border-image!

Todo verde para todos los navegadores, bueno, IE9 y más allá. También es compatible con dispositivos móviles, pero si desea usarlo en Android e iOS 3 y 4, deberá agregar el prefijo -webkit-. Del mismo modo, si todavía es compatible con Firefox 3.6, querrá agregar el prefijo -moz-.

Si ha creado algún efecto de sombra de cuadro increíble, ¡háganoslo saber en los comentarios!