Tutorial Efecto shadow-box con CSS3

Tutoriales : Efecto Shadow Box con CSS3

Anteriormente, se escribió un tutorial sobre cómo crear las esquinas redondeadas, con la ayuda de CSS3. El tutorial de hoy se encuentra en otro gran efecto que se puede lograr utilizando una propiedad CSS3, caja de sombra. Este box-shadow propiedad permite aplicar uno o más efectos de sombra a un cuadro. Y de nuevo, este efecto sólo es compatible con Firefox, Safari, Chrome y Opera, por ahora.

La propiedad Box-shadow contiene seis atributos:

box-shadow: 1px 1px 1px 1px rgba(0,0,0,1) inset;
Propiedades: x-offset, y-offset, blur distance, spread distance, color, inset attribute for inner shadows;

Atributos	Descripción
x-offset	Desplazamiento horizontal de la sombra. Los valores positivos para hacer que la caída de la sombra en el lado derecho de la caja. Los valores negativos hacen que las sombras caen sobre la izquierda.
y-offset	El desplazamiento vertical de la sombra. Los valores positivos para hacer que la caída de la sombra debajo de la caja. Los Valores negativos hacen que las sombras caen en la parte superior de la caja.
Blur distance	Los valores negativos no son permitidos. Si el valor es cero, el borde de la sombra será nítido. Cuanto más positivo sea el valor, el desenfoque de la sombra es más.
Spread distance	Los valores negativos hacen sombra a disminuir hacia el interior. Un valor positivo hace que la sombra de su expansión en todas las direcciones.
Inset	La adición de este atributo a la sintaxis va a crear un efecto de sombra interior.
Color	El color de la sombra. Código HEX, RGB o RGBA se puede utilizar como valor.

Estos son algunos ejemplos agrupados de acuerdo a los atributos que se utilizan. He usado RGBA para el color. Por lo tanto, quiero explicar acerca de RBGA también. RGBA funciona de manera similar como la anterior RGB usando CSS2. Pero, RGBA incluye "alfa" para permitir la especificación de la opacidad de un color.

RGBA ( R , G , B , A )
R: 0-255
G: 0-255
B: 0-255
Un :0-1

Si están menos familiarizados con el color RGB, a continuación puede utilizar generadores en línea, agrege un valor de opacidad para crear RGBA.

Ejemplos de “box-shadow” con CSS3

Este cuadro normal con afilados bordes esquinas se creó usando el siguiente código.

<div style="background-color:#F1F1F1; border:3px solid #DDDDDD;"></div>

Esta caja normal con las esquinas redondeadas se ha creado utilizando el siguiente código.

<div style="background-color:#F1F1F1; border:3px solid #DDDDDD;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;padding: 10px;"></div>

Sombra (usan los atributos x-offset y offset)

-webkit-box-shadow: 5px 5px rgba(0,0,0,0.4);

-moz-box-shadow: 5px 5px rgba(0,0,0,0.4);

box-shadow: 5px 5px rgba(0,0,0,0.4);

-webkit-box-shadow: 5px 5px rgba(0,0,0,0.4);

-moz-box-shadow: 5px 5px rgba(0,0,0,0.4);

box-shadow: 5px 5px rgba(0,0,0,0.4);

-webkit-box-shadow: -5px -5px rgba(0,0,0,0.4);

-moz-box-shadow: -5px -5px rgba(0,0,0,0.4);

box-shadow: -5px -5px rgba(0,0,0,0.4);

Usando el atributo Blur

-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);

-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);

box-shadow: 5px 5px 5px rgba(0,0,0,0.4);

-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);

-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);

box-shadow: 0px 0px 20px rgba(0,0,0,0.4);

Usando el atributo Spread

-webkit-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);

-moz-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);

box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);

-webkit-box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);

-moz-box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);

box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);

Usando el atributo Inset para inner shadow

-webkit-box-shadow: 10px 10px inset rgba(0,0,0,0.4);

-moz-box-shadow: 10px 10px rgba(0,0,0,0.4) inset;

box-shadow: 10px 10px rgba(0,0,0,0.4) inset;

Usando el atributo Inset con Blur

-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;

-moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;

box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;

Usando el atributo Inset con Blur y Spread

-webkit-box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

-moz-box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;