Bordes transparentes: background-clip y background-origin. Relación entre fondos y áreas del elemento

Una locura las posibilidades de los fondos al jugar con background-clip y background-origin e interactuar con el área de los bordes, de los rellenos y del contenido.

Bordes transparentes: background-clip y background-origin. Relación entre fondos y áreas del elemento

Por Kseso ✎ 4

bordes transparentes con cssEntre los bordes y los fondos de los elementos hay una relación y comportamiento un tanto dispar. Dispar según qué usemos de fondo. Y disparidad que lleva aparejada en ocasiones resultados inesperados y no deseados a los usuario no prevenidos.

Fíjate en la imagen de aquí al lado. Un caja con un backgroound en color sólido y un border en valor rgba para obtener cierta transparencia en él.

Como apuntaba, posíblemente haya quien espere el resultado superior: border trasnparente. Sin embargo lo que vas a obtener es el inferior. El color del background se extiende por debajo del border opacando lo que se encuentra debajo de él.

Así que si eres de los usuarios sorprendidos por este comportamiento tengo dos noticias para ti:

  1. Es el comportamiento "natural" y por lo tanto lo que cabe esperar que ocurra.
  2. Como casi todo, esta forma por defecto se puede cambiar a voluntad.

Background-clip

¿Recuerdas qué ocurre con los elementos en el modelo de caja de Css y la relación que se establece entre su tamaño final y su anchura/altura, los rellenos y bordes?: que puede cambiarse (la relación) en función de qué modelo de caja declaremos.

Pues análogo al modelo de caja y la propiedad box-sizing, en lo referente a los fondos (background) también hay definido un modelo y la propiedad para manejarlo. Esto es, qué zonas de la caja han de ser cubiertas por el fondo.

background-clip

distintas zonas a cubrir por el background
Valores de background-clip y áreas cubiertas

La propiedad background-clip determina y controla qué áreas del elemento han de ser dibujadas con el fondo declarado para ese elemento.

Los valores posibles para la propiedad background-clip son:

border-box
El fondo se dibuja en toda la caja. Esto incluye la superficie ocupada por el borde (si lo tiene) y debajo del borde (eje Z).
padding-box
El fondo cubre hasta el padding declarado (si lo hay) dejando sin cubrir el borde.
content-box
El fondo sólo se dibuja en el área del contenido. Queda sin cubrir el padding y el border.

Como ves, en el control y áreas cubiertas por el fondo el margen es ajeno y siempre queda sin cubrir.

En el pen de abajo tienes una demo del funcionamiento de esta propiedad y sus valores.

See the Pen background-clip by Kseso (@Kseso) on CodePen.


Así que si quieres tener bordes transparentes (no afectados por el color del fondo) debes declarar la propiedad background-clip con un valor distinto a border-box

Background-origin: imágenes en el fondo

background-clipAhora vuele al pen anterior y fíjate (si no lo hiciste) en el último elemento, el que tiene, además del color del fondo, una imagen no repetida en el background. ¡Qué cosa más extraña!.

Como ves, no tiene declarada la propiedad background-clip y la imagen tiene un tamaño apropiado para que sea más ancha que la caja pero menos alta y que así notes qué ocurre con los bordes.

Los fondos formados por imágenes se pueden posicionar. La propiedad background-position indica en qué punto de la caja se debe colocar la imagen si no está repetida o el punto que marca el centro del mosaico de ellas si sí se repite. Por defecto (el valor 0 0) es la esquina superior izquierda del área del padding.

A priori, si no hay repetición de la imagen y a diferencia de lo que sucede con el color del fondo, la superficie ocupada por el borde superior y por el izquierdo (áreas del borde) quedan sin cubrir por la imagen. Y el borde derecho e inferior dependerá del tamaño de la imagen (natural o modificado con background-size). Repito, esto por defecto.

Curioso efecto. Y es que las imágenes usadas como fondos tienen un comportamiento algo más complejo que los colores planos. Y para controlar el comportamiento de las imágenes utilizadas en los backgrounds disponemos de algunas propiedades extra. O lo que es lo mismo: los resultados que se pueden lograr combinando los distintos valores de las propiedades que se pueden declarar a las imágenes de fondos son muy numerosos y variados

Vimos que con background-clip podemos recortar la imagen según las distintas áreas que nos interesen.

Además de esta propiedad, la especificación también define la background-origin que especifica el área sobre la que se realiza el recorte (clip).

Visto de otra forma. Con background-clip recortamos el fondo para dejarlo del tamaño del área indicada (del contenido, del padding o del border) y con background-origin le indicamos dónde colocamos ese recorte, si en la esquina superior izquierda del área del margen, del área del padding o de la del contenido.

Al ser dos propiedades y tres valores para cada una son 9 los escenarios posibles. Los tienes en el pen de abajo:

See the Pen Background-origin & background-clip by Kseso (@Kseso) on CodePen.


En este escenario de una imagen no repetida conjuntamente con las propiedades background-clip y background-0rigin los distintos valores para la propiedad background-size no tiene mayor efecto que el tamaño con el que se dibuja la imagen, no sobre la superficie ocupada por ella y el lugar donde se renderiza.
Excepto si el tamaño natural de la propia imagen o porque la resultante por declararla con un tamaño menor de la superficie que debería cubrir o porque contain la haga menor que el área a cubrir, en estos casos dejará un espacio del área indicada del elemento sin tapar con la imagen.

Background-origin, Background-clip y color de fondoTen presente que la propiedad background-origin sobre el color del fondo background-color no tiene ese efecto de desplazamiento hacia la derecha y abajo en los casos en los que la imagen sí se desplaza para cubrir esos áreas.

Puedes verlo en la imagen de al lado o yendo al pen y añadiendo un color de fondo al penúltimo div de la demo.

Background-origin, repeticiones y tamaños dispares

Si a la propiedad background-origin añadimos las variables de repetir o no la imagen y distintos tamaños de la imagen de fondo, los posibles escenarios ya marean.

Puedes echar un vistazo y jugar tú mismo con las variaciones incluidas en este pen de ejemplos.

Mención especial los últimos ejemplos de este último pen en los que introduzco la propeidad background-size con los valores contain y cover.

Imágenes y colores con bordes límpios

De todos los escenarios posibles al combinar los distintos valores de unas cuantas propiedades hay algunos que cabría resaltar por su estética y efecto final.

Así es posible realizaciones como este ejemplo final a título ilustrativo. Un montón de bordes traslúcidos sin interferencias entre ellos con un sólo elemento

See the Pen Special borders single element by Kseso (@Kseso) on CodePen.

Background-position

Para completar el artículo ahora debería dedicarle unas líneas a la propiedad Background-position. Pero ya es lo suficientemente extenso y denso.

Así que mejor dedicarle otro post: Background-position: secretos, curiosidades y un valor complejo recién documentado.

Un artículo complementario

Como complemento a este artículo te recomiendo la lectura [ing] del post que @anatudor publica en Css-Tricks: The 'background-clip' Property and its Use Cases.

Una gran carencia o falta

Como ves, hay todo un mundo para jugar y experimentar con las distintas propiedades del grupo background y obtener una gran diversidad de efectos o resultados finales.

Pero con todo y con esto hay un detalle que no está, de momento cubierto. No tenemos un background-border-radius que permita redondear el área cubierta por el fondo con independencia del borde.

Quizás algún día...

Artículo publicado originalmente el 19 de Marzo de 2014.

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 4

  1. Hablamos muchas veces de las serendipias. Y hace dos semanas, después de pelearme con unas 'hr' y sus bordes, comencé a experimentar con 'background-clip'.
    Qué sorpresa cuando vi este nuevo artículo. Gracias.
    (Y sigo insistiendo con eso de la "conexión cuántica", ¿alguien más habrá comenzado a trabajar en lo mismo?. ;-) ).

    Mis pruebas las abandoné rápido por otras, pero ya que estoy, dejo aquí el último borrador que hoy subí a Codepen, por si alguien quiere verlo.

    Pruebas con background-clip.

    Puse otras combinaciones, aprovechando que 'background-image' reconoce fondos múltiples, y 'background-clip' también lo hace. Me quedé pensando en eso que dijiste sobre la carencia de un 'background-corner-radius' (como de un 'background-image-opacity', agrego yo), algo que todavía podemos "corregir" con el viejo truco de aumentar el 'border-radius' para la caja. En los ejemplos que usé están puestos.

    Existiendo 'border-image' y la nueva colección de 'border-style' hay efectos que ya no se justifica hacerlos con combinaciones de fondos, aunque viendo tus ejemplos me volvieron las ganas de hacer pruebas para otros diseños.

    Muy buen artículo, como de costumbre.

    ResponderEliminar
    Respuestas
    1. Es que la casuística de jugar con las propiedades del grupo border y background y los valores de cada una son mareantes y casi inabarcables.
      Imposible de relacionarlas en un post
      Demasiadas combinaciones, no todas satisfactorias en situaciones "normales pero no descartables para alguna demo o efecto muy concreto.

      Un saludo, Furoya

      Eliminar
  2. Aunque no tiene relación con el articulo, permitame tomarme el atrevimiento de publicar aqui este comentario adulador y de poca relevancia.
    Hace unos días encontré este blog, vaya sorpresa y que alegría! Es una verdadera joya, me encanta el estilo de la redacción, las ideas que lo impulsan, el aspecto del sitio, los artículos, todo el conjunto es genial y diferente.
    Así que le dejo mis saludos y mis respeto por su trabajo.
    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. A ti, Lisandro.
      Gracias.

      P.D.: olvidaste la dirección a donde mandarte el jamón xD

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap