CSS3, los fondos y bordes del futuro

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:
  1. background-image: url(flower.png), url(ball.png), url(grass.png);
  2. background-position: center center, 20% 80%, top left;
  3. 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:
  1. 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.

box-shadow.png

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.


5 comentarios a esta entrada

[...] unos días Jose Manuel Pita (administrador de Tripix.net) nos informaba de la nueva propuesta de la W3C para el estándar CSS3 que afectaba a los background y los border de nuestras aplicaciones. Estas nuevas propiedades podrían ser los fondos y bordes de nuestros [...]

¿Que si me lo parece? Y tanto, que ganas de que aparezca al fin acabado un navegador que implemente CSS 3.0

Lo intento con lo del spread radius:

Spread radius = radio de dispersión

Podría ser la dispersión de la sombra. Como las sombras reales, se haría menos intensa en los bordes. O podría ser para darle forma redondeada... A saber.

¡Saludos!

Pienso que es la oportunidad para aplicar cosas que estamos esperando hace rato. Por ejemplo, bordes redondeados.

Efectivamente oMega, spread raious hace referencia a la "dureza" de los bordes. Al menos en Photoshop es casi sinónimo de Blur cuando nos referimos a sombras y Glow.

Saludos.-

Leave a Reply