Abierto al fondo. 26.1.14
Cómo lograr que un elemento deje ver el fondo de su ancestro pero que quede cubierto entorno a él.
Abierto al fondo.
Allá cuando recién comenzaba su andadura este block, abril de 2012, dediqué un artículo para simular recortes en el fondo del hijo y así dejar ver el fondo del padre: "Ventana abierta al fondo del body: recortes en el background".
La introducción de entonces sigue siendo válida hoy: Una de las cuestiones que cada 2x3 es objeto de consulta en foros y páginas de ayuda sobre Css es cómo hacer para que un contenedor con un fondo permita ver en algunas zonas el background del body o de un ancestro.
Es cierto que no hay una herramienta*1 en css que nos permita hacer recortes, pero lo que Css no da, la imaginación lo suple.
*1: No considero las regiones de Css porque creo que aún es pronto para tenerlas presentes.
Y este es un campo, el de abrir ventanas al fondo, que no había vuelto a retomar desde entonces. Así que va siendo hora de revisarlo y ampliarlo.
La técnica de abrir el fondo al fondo
La magia Css de esta técnica proviene de un pen de Ana Tudor aka @thebabydino.
Todo consiste en dejar sin declarar el background del elemento que nos interese y utilizar la propiedad box-shadow con un valor apropiado y suficientemente grande como para cubrir la superficie que nos interese. Si declaramos los 3 primeros valores numéricos del box-shadow a cero la sombra será uniforme (sin degradado).
h1 {
width: 18rem;
height: 18rem;
border-radius: 50%;
box-shadow: 0 0 0 80rem rgba(0,0,0,.7);
}
En la demo, el h1 es el elemento que deja ver el fondo de su ancestro. No importa el lugar dónde se muestre, como puedes ver en el pen al que le añadí una animación Css (@keyframes) para resaltarlo.
See the Pen Opened to background: the nightscope by Kseso (@Kseso) on CodePen.
Ver demo a full Descargar demo
El div que uso en la demo no sólo lo utilizo para evitar el efecto tan molesto que supone la aparición del scroll por la animación.
Otros efectos
Los límites a esta técnica y los efectos que puedes lograr sólo están en la imaginación de cada uno. Como ejemplo, mira este pen de Ana Tudor. En él la autora lo usa para crear recortes circulares hacia dentro (border-radius invertido) y con un poco más de código simular que son parte de un círculo común.
See the Pen Remember Yogi Bear? by Kseso (@Kseso) on CodePen.
Kseso
the obCSServer ᛯ 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 Kseso
Lo bueno que tiene el inventar formatos es que se encuentra siempre más de una manera de hacerlo. Desde la "pista" o "track" para mover el contenido que mostraste hace años hasta las máscaras de sombra que traés ahora hay bastante para elegir, según el caso.
ResponderEliminarMe acordé de otra, que es usar gradientes. También se han visto por acá, y ya que estaba hice uno de muestra, me gustan porque permiten algunas formas elaboradas.
Hole in the background-color.
Le dejé unas barras de desplazamiento para que se pueda confirmar que la imagen está en el fondo del body. Y antes de ver tu artículo sobre regiones CSS
¿Guerra en las Regiones Css?
se me dio por agregar una (falsa) al ejemplo. No le quita ni le agrega nada, pero lo quería mencionar por la casualidad.