JMiur [E]

Las propiedades comunes para agregar fondos a las etiquetas se han visto ampliadas por la irrupción del CSS3 ya que en los navegadores modernos, hay muchas alternativas extras con las que antes no contábamos e incluso, ni imaginábamos.

No todas ellas se aplican de modo habitual pero, poco a poco, van extendiéndose. Una de las más difundidas es el uso de colores en formato RGBA que se diferencian de los colores comunes porque requieren un dato extro, esa A final indica la transparencia, un valor decimal que va desde 0 (totalmente transparente) a 1 (totalmente opaco); en este ejemplo usamos el mismo color blanco y variamos esa opacidad:
#unelemento { background-color: rgba(255,255,255,0.5); }

background-color: rgba(255,255,255,alfa);

Si se usa Internet Explorer 8, hay una forma de simular ese mismo efecto utilizando filtros pero el resultado sólo será aceptable si se usa con prudencia ya que los filtros son relativamente lentos.

Las nuevas propiedades del CSS3 también nos amplían las posibilidades de las imágenes de fondo.

background-clip controla la forma en que se muestran los fondos con relación a sus bordes o paddings y puede tener res valores: border-box, padding-box o content-box que es la que más uso práctico puede tener ya que nos permite establecer paddings y no llenarlos con el fondo que es lo que ocurriría normalmente.

normal
content-box

background-size nos permite dimensionar las imágenes de fondo, algo que hasta ahora, no podía hacerse y admite que utilicemos porcentajes, pixeles o palabras especiales como auto, cover y contain que establecen el modo en que la imagen se "expandirá; si usamos cover lo hará ocupando el total, contain lo hará ocupando solo el alto o el ancho con l oque la imagen no se deformará:

background-size: 150px auto;
background-size: cover;
background-size: contain;

background-origin define desde dónde comenzará a mostrarse la imagen y por defecto es padding-box así que si la etiqueta tienen un padding y un borde, la imagen abarcará el padding pero no el borde; con border-box, la imagen abarcará el borde pero no el padding (quedrá por debajo del borde) y con content-box no incluira a ninguno de los dos:

background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;

Tal vez, la caracterísitca más interesante de estas nuevas propiedades sea la posibilidad de agregar varias imágenes de fondo en un mismo elemento. Para esto, no hacen falta propeidades diferentes sino que se usan las misma y los valores, se separan por comas; por ejemplo, de este modo:
background-color: white;
background-image: url(IMAGEN_1),url(IMAGEN_2);
background-position: 50% 50%, 0% 0%;
background-repeat: no-repeat, repeat;
Cada imagen la controlamos de modo individual y se muestran como capas ordenadas, la primera es la que está más abajo y la última es la que está más arriba por lo tanto, así que debemos tener en cuenta este detalle si es que se superponen.

La cantidad de imagenes a usar no está definida, en el ejemplo de la izquierda se usan dos y en el de la derecha tres:

4 comentarios:

Felipe  

Realmente impresionante, no solo porque el código no es complicado, sino además porque abre mas opciones en diseño y simplifica el HTML en algunos casos donde tocaba apelar a algunos hacks para lograr ciertos diseños, como en el caso de los fondos redimensionables.

Responder
JMiur  

Sí. Se amplian las posibilidades y se facilitan las cosas.

Responder
SignedPSP  

Y esto es compatible con todos los navegadores, cierto? me refiero al uso de colores RGBA.

Hace tiempo, cuando estaba aprendiendo HTML y CSS desde el comienzo, usar dos imágenes (background-image) no funcionaba en IE y por lo visto sigue sin poderse en IE8 (no lo uso, así que no he actualizado :P).

Responder
JMiur  

Los colores rgba no funcionan en versiones inferiores a IE9; para esas versiones, se deben usar filtros.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR