Box-shadow, una de las nuevas y mejores características de CSS3

La propiedad CSS box-shadow permite a los diseñadores implementar fácilmente sombras difuminadas (tanto exterior o interior) en casi cualquier elemento (principalmente de caja – div), especificando los valores para el color, el tamaño, desplazamiento entre otras características.

Sintaxis

box-shadow: [ color | offset-x | offset-y | blur-radius | spread-radius | inset ]

Ejemplo:

.shadow {
box-shadow: rgba(220,220,220,.65) 3px 3px 10px 5px inset;
}

Valores


1º Valor: color de la sombra
Se puede elegir expresarlo en cualquiera de las forma permitidas (hexadecimal o rgba).  En el ejemplo, la expresada en valor rgba (rgb+canal alpha de trasnparencia)
Y en caso de no declarar un valor del color, toma el de la propiedad color.
2º Valor: Desplazamiento horizontal de la sombra (offset)
Puede ser un valor positivo o negativo y estar expresado en cualquier unidad de longitud que permite css. Expresa el desplazamiento horizontal de la sombra creada. Un valor positivo: sombra a la derecha. Negativo: hacia la izquierda. La posición de la sombra es creada con relación a la posición del elemento al que se aplica.
3º Valor: Desplazamiento vertical:
Aplica lo mismo que en el anterior, pero en sentido vertical. Valor positivo hacia abajo, negativo hacia arriba.
4º Valor: radio de desenfoque
En inglés “Blur Radius”. Es opcional. El radio de desenfoque define la dureza o suavidad de la sombra. Cuanto menor sea el valor, más nítida la sombra. Un valor alto creará un desenfoque grande. Admite cualquier valor, pero los negativos son interpretados como Cero (0).
5º Valor: Distancia de propagación (opcional).
Otro valor de la longitud, puede ser positivo o negativo, y define hasta donde se propagará la sombra (más allá de lo definido por offset). Un valor negativo hará que la sombra sea más pequeña, más comprimida.
6º Valor: Inset/outset (opcional)
Dos posibles valores, siendo outset el valor por defecto. Esta propiedad marca hacia dónde se creará la sombra. Inset: se crea en el interior del elemento, outset por fuera de él. Se puede declarar al inicio o al final, si se intercala entre los demás valores se anula la declaración.

Compatibilidad con navegadores

Lo cierto es que las CSS 3 todavía están en fase de especificación, aunque ya se encuentran muy avanzadas y los navegadores más modernos ya han comenzado a implementarlas. No obstante, el W3C todavía no ha liberado las especificaciones de esta versión de CSS y hasta que empiece a recomendar su implementación los clientes web basados en Gecko y WebKit tienen soporte a esta funcionalidad de CSS3, pero a través de prefijos.
Para Opera podemos utilizar box-shadow en las versiones más moderas,  sin ningún inconveniente.

Atributo box-shadow para navegadores basados en motores de renderizado Gecko, como Firefox:  De manera temporal, Firefox es capaz de interpretar el atributo -moz-box-shadow, por ejemplo:

-moz-box-shadow: #090 1px 1px 0px;

Atributo box-shadow para navegadores basados en moteres de renderizado WebKit, como Safari o Google Chrome: En estos momentos y de manera temporal, navegadores como Chrome o Safari entienden el atributo: -webkit-box-shadow, por ejemplo:

-webkit-box-shadow: #fc8 3px 3px 1px;

Como podremos imaginar, si deseamos ampliar al máximo la compatibilidad con box-shadow, necesitaríamos indicar tanto el propio atributo box-shadow, así como -moz-box-shadow y -webkit-box-shadow para que funcione en las versiones actuales de Firefox, Safari, Chrome, etc.

En el caso de Internet Explorer, de manera nativa solo es interpretado a partir de la versión 9 en adelante. Si se quiere hacer efectos de sombra en versiones inferiores del IE, se puede hacer uso de filtros específicos de Microsoft (Shadow Filter), pero no es la mejor ni la más recomendada práctica.

Ejemplo:

.shadow {
box-shadow: #111 3px 3px 4px ;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color='#111111', Strength=4, Direction=135)";
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Color='#111111', Strength=4, Direction=135);
}

Generadores online

Estos son solamente algunos:

http://css3gen.com/box-shadow/
http://westciv.com/tools/boxshadows/index.html

Referencia oficial W3C

http://www.w3.org/TR/css3-background/#the-box-shadow

Anuncios

2 pensamientos en “Box-shadow, una de las nuevas y mejores características de CSS3

  1. Pingback: CSS3, box-shadow vs filter: drop-shadow « enbolivia.com srl.

  2. Pingback: CSS3, box-shadow vs filter: drop-shadow « lvillasante

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s