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í...
-
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.
-
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.
September 13th, 2008 at 12:44 pm
[...] 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 [...]
September 13th, 2008 at 3:28 pm
¿Que si me lo parece? Y tanto, que ganas de que aparezca al fin acabado un navegador que implemente CSS 3.0
September 13th, 2008 at 6:56 pm
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!
September 16th, 2008 at 3:11 pm
Pienso que es la oportunidad para aplicar cosas que estamos esperando hace rato. Por ejemplo, bordes redondeados.
September 23rd, 2008 at 10:31 pm
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.-