El grupo de trabajo encargado del estandar CSS publican un nuevo borrador de trabajo relativo a los bordes y fondos (backgrounds and borders) CSS3.
Algunos aspectos muy novedosos respecto a los fondos (background)
Vamos a poder poner varias imágenes de fondo en nuestras cajas, puediendo especificar, para cada una de ella, propiedades distintas. Así...
CSS:
-
background-image: url(flower.png), url(ball.png), url(grass.png);
-
background-position: center center, 20% 80%, top left;
-
background-origin: border-box, content-box;
Me gusta también la propiedad "Background-origin", que nos permitirá decidir desde qué punto de nuestra caja se sitúa el fondo, los posibles valores serán:
- padding-box: posición numérica o porcentual desde el padding de la caja
- border-box: posición numérica o porcentual desde el borde de la caja
- content-box: posición numérica o porcentual desde el contenido de la caja
Sombras en las cajas
La propiedad "box-shadow" aplicará una o varias sombras a nuestra caja. Se utilizan cuatro valores numérico:
El primero define el eje horizontal de la sombra, un valor positivo lo aplicaría al lado derecho de la caja, si es negativo lo aplica en el lado izquierdo.
El segundo define el eje vertical donde los valores positivos o negativos aplicarían la sombra arriba o abajo de la caja respectivamente.
El tercer valor hace referencia al difuminado de la caja (blur)
El cuarto valor es el que menos consigo entender, se denomina "spread radius", pero soy incapaz de traducirlo.
CSS:
-
span {border: thin solid; box-shadow: 0.2em 0.2em #CCC}
Se vería así:
Por último, si a en la propiedad box-shadow especificamos el valor "inset" (es posible que cambie a "inner") las sombras se aplicarán al interior de la caja.
Creo que este tipo de cosas nos darán bastante más juego al diseñar nuestras futuras web ¿No os parece?
Actualización: gracias a Omega y Matías sabemos que el Spread radius hace referenica al grado de dispersión o dureza de la sombra.
