Sombras en CSS-3 {box-shadow}. Salto de la decoración de caja {box-decoration-break}.

Introducción

Para completar todo los referente a fondos y bordes especificado en el documento CSS Backgrounds and Borders Module Level 3 se exponen las siguientes nuevas propiedades de CSS-3:

El módulo de fondos y bordes CSS Backgrounds and Borders Module Level 3 se encuentra en fase CR Candidate Recommendation en la fecha en que escribo estos temas: 30 de Septiembre de 2011. También en esta fecha he probado los contenidos en los navegadores Firefox 7.0.1, Opera 11.51, Chrome 14.0 y Safari 5.0. Cuando mencione estos navegadores en la exposición de estos temas me estaré refiriendo a estas versiones. Tener en cuenta que lo que se expone como que no funciona para una determinada versión es posible que si lo haga en versiones más recientes cuando esté leyendo estos temas. En cuanto a Explorer he decidido ni siquiera molestarme en probarlo por ahora, aunque es posible que muchas cosas funcionen en IE9. En IE8 y anteriores nada de CSS-3 funcionará.

Sombras de caja CSS-3 {box-shadow}

Esta propiedad nos permite poner una sombra a un contenedor. La sintaxis del valor es none | sombra [, sombra]*. O bien ninguna (este es el valor inicial) o bien una o más sombras donde cada una se compone de [longitud{2,4} && color?] && inset. Esto quiere decir:

  • La longitud pueden ser de 2 a 4 valores, que significan lo siguiente:
    • El primer valor se destina a la separación horizontal de la sombra. Un valor positivo dibuja una sombra con esa separación del borde derecho de la caja, una negativa para la izquierda. Con cero coincide con la propia caja.
    • El segundo valor es para la separación vertical, separando desde abajo para positivos, arriba para negativos y con cero coincide con la caja.
    • El tercer valor es para el radio del difuminado. No se permiten valores negativos. Si es cero no hay difuminado.
    • El cuarto valor es para la propagación del difuminado. Los valores positivos propagan el difuminado en todas las direcciones. Los valores negativos lo contraen.
  • El color es opcional y si no se da ninguno lo elegirá el navegador, posiblemente de la propiedad {color} establecida para el elemento.
  • La palabra clave inset, si está presente, dibujará la sombra en el interior de la caja.

Para ver estos valores en funcionamiento he preparado un pequeño script en la cabecera de este documento. Se trata de la función actuaShadow() que permitirá cambiar el estilo de la sombra de forma dinámica. El elemento tiene inicialmente este código:

<div id="ejemplo-box-shadow"
style="width: 200px; height: 75px;
background-color: orange; border: blue solid 1px;
box-shadow: 20px 15px 10px 5px rgba(0,0,255,0.5);
-webkit-box-shadow: 20px 15px 10px 5px rgba(0,0,255,0.5);
"></div>

Funciona en Firefox, Opera y Chrome, pero Safari necesita -webkit- para aplicar esta propiedad. Usamos el color azul transparente para producir la sombra (ver más sobre transparencias CSS3).

Ejemplo:






Estilo final: box-shadow: 20px 15px 10px 5px rgba(0,0,255,0.5)

También podemos aplicarlo a bordes redondeados usando la propiedad {border-radius}:

Ejemplo:

Enero 2014: Los navegadores actuales ya soportan box-shadow. De todas formas he incorporado el gestor de Vendor Prefixes (vpForCss) para incorporar los prefijos de los navegadores a esta propiedad de forma automática. Con esto sólo hay que poner la propiedad sin prefijo en estilo en línea y el gestor se encarga de aplicarle prefijo si fuera necesario.

Salto de la decoración de caja CSS-3 {box-decoration-break}

Cuando hay que romper una caja debido a que en la vista impresa se pasa de página o por ejemplo para los elementos de línea cuando saltan a otra línea, podemos hacer que la decoración de la caja se rompa o se genere otra vez la decoración en la siguiente porción. En el primer caso usamos el valor slice (valor inicial) y en el segundo el valor clone para esta propiedad. El siguiente ejemplo tenemos un elemento de línea <span> con un texto que supera el tamaño de una pantalla de 19" a un tamaño de texto normal, produciendo un corte o rotura en las decoraciones de bordes, sombras, etc:

<span style="
line-height: 2em;
border: solid blue 1px;
border-radius: 0.5em;
box-shadow: 0.15em 0.15em 0.1em 0.1em rgba(0,0,0,0.4);
-webkit-box-shadow: 0.15em 0.15em 0.1em 0.1em rgba(0,0,0,0.4);
box-decoration-break: slice;
">...</span>

Ejemplo:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.

En cambio usando el valor clone se crearán nuevas cajas independiente sólo a efectos de volver a regenerar la decoración:

Ejemplo:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.

Esto me ha funcionado solamente en Opera.