Fondos fijos heredados 25.9.16

Fondos fijos heredados

Hace escasos días Mary Lou (aka Manoela on Twitter) volvía a sorprendernos con otra de sus realizaciones en Codrops: Background Segment Effect.

Hay detalles que enfriaron mi sorpresa inicial. Tanto en la recreación de Mary Lou en Codrops como la galería en la que se inspiró para su demo recurren a una cantidad ingente de elementos para conseguir la segmentación de la imagen del fondo. Hasta 15 conté en algún caso. Y otro el cómo logra cada segmento y su sombra.

Así que a falta de otra excusa mejor para un artículo en el blog me planteé si sería posible aligerar algo el marcado y la obtención de los segmentos.

1. Solventar el tema del marcado HTML (o elementos necesarios) es fácil. Es un viejo recurso del blog y otras muchas demos: pseudoelementos. Incluso los del head si fuesen necesarios.
2. Para lograr mostrar la misma imagen y que además coincida con la parte sobre la que se muestra cada pseudo al reducir sus tamaños nada como heredar los fondos.
3. Para la sombra de cada segmento, pues box-shadow pero en el mismo segmento.

See the Pen JRNRNB by Kseso (@Kseso) on CodePen.

El punto 1 de la lista previa no necesita atención especial. A estas alturas es (o debería) ser de sobra conocido por todos.

Particularidades de los fondos heredados

La propiedad background es de esas propiedades CSS que siempre guarda alguna sorpresa a poco que juegues con ella. Con cada una de las que engloba y con los diversos valores que admiten las distintas propiedades del grupo. Si lo necesitas tienes una explicación detallada en el artículo "El fondo a fondo"

Una de ellas es que el elemento que hereda los fondos de su padre hereda todo, también las coordenadas o puntos de referencia para colocarlos, además del tamaño, área a cubrir... étc.

El valor absoluto computado para el fondo del padre es el que pasa a los hijos que heredan el fondo. Salvando las distancias, es como si el hijo fuese static para todo lo relativo a su background.

Con un ejemplo quedará más claro. Si usas una imagen como fondo y declaras background-size: 100% 100% al padre, el tamaño de la imagen del fondo heredada por el hijo será del tamaño del padre. No importa que el hijo sea la mitad o el doble que su padre.

O las coordenadas de background-position son las mismas, aunque ello supongan que queden fuera del hijo. El background-position: 0 0 heredado indica el punto 0,0 (esquina superior izquierda) del padre o ancestro, con total independencia del lugar donde le corresponda estar al hijo y su tamaño.

Nota: esto ocurre con independencia de cuál sea el elemento padre. No sólo con el elemento raíz.

Lecturas complementarias sobre los fondos:

• El fondo a fondo
• Secretos de background-position
• background-clip y background-origin

Con esto en mente ya podemos dimensionar a voluntad los pseudos y colocarlos en cualquier parte de su contenedor padre que la porción del fondo mostrado será exactamente la que se encuentre bajo cada uno de ellos.

Recortes y desbordes

En la demo de Codrops (y la que sirvió de inspiración a su autora) al no usar los fondos heredados necesitan que todos y cada uno de los elemento sea del mismo tamaño (altura y anchura). Por lo que para obtener los segmentos Mary Lou se ve obligada a usar la propiedad clip o clip-path

El resultado es que no se muestra más que la porción del elemento indicado por los valores declarados. Bien, esa es su función. Pero ello supone que si le añades sombras o bordes también quedarán fuera de lo mostrado. Y esto es otro de los motivos por lo que se necesitan tantos elementos: uno para la porción de imagen y otro bajo él (z-index) para mostrar la sombra del anterior.

Lo puedes ver en el siguiente pen en el que yo también uso la propiedad clip-path con los pseudoelementos.

Por el número de segmentos mostrados y como sólo uso un <h1>EsCss</h1> necesito recurrir a los pseudoelementos del head

See the Pen Background Segment old school 2 by Kseso (@Kseso) on CodePen.

En esta demo puedes ver otra particularidad. Pese a lo apuntado antes sobre la coincidencia de las imágenes entre "el recorte" y lo que haya debajo aquí no ocurre. Hay desfase entre el segmento y la imagen que se encuentra bajo él.

Ello es debido a que a cada uno de los pseudoelementos los desplazo con la declaración transform: translate() que sólo afecta a lo visual o el punto donde se muestra el elemento. Todo lo demás no se ve afectado.

Un poco de movimiento

Una vez reducido el número de elementos necesarios al usar los pseudoelementos que heredan los fondos y ajustado su tamaño o bien con las propiedades para ello (width height( o con las de ubicación (top - right - bottom - left) en vez de clip-path podemos añadir algo de movimiento a los segmentos de imagen para resaltar su presencia.

Algo sencillo. Una sencilla animación con ayuda de la regla CSS @keyframes

See the Pen Background Segment old school 1 by Kseso (@Kseso) on CodePen.

Y como estamos enredendo con CSS nada como recurrir a las CSS custom properties acotadas o locales para simplificar y sincronizar los movimientos de los segmentos de imagen con sólo una regla @keyframes:

header::after { left: 55%; bottom: 53%; --p1: translateX(3vw) translateY(-3vh); --p2: translateX(0vw) translateY(-6vh); --p3: translateX(3vw) translateY(-6vh); } h1::before { right: 54%; top: 53%; --p1: translateX(-3vw) translateY(3vh); --p2: translateX(-6vw) translateY(0vh); --p3: translateX(0vw) translateY(0vh); } @keyframes siMuove { 0% { z-index: 5; box-shadow: 0 0 .5rem .5rem rgba(0,0,0,0); transform: var(--inicial); } 20%, 30% { box-shadow: 0 0 .5rem .5rem rgba(0,0,0,.5); transform: var(--p1); } 45%, 55% { transform: var(--p2); } 70%, 80% { transform: var(--p3); } 100% { z-index: 5; box-shadow: 0 0 .5rem .5rem rgba(0,0,0,.5); transform: var(--p1); } }

Nada impide que la animación se ejecute al cargar la demo en vez de ser necesario que el usuario intervenga pulsando el "botón" al efecto. Sólo se requeriría añadirle un pequeño delay para tener cierta garantía de que comenzase una vez cargada la página.

Y para terminar... el efecto contrario

Las particularidades de los fondos fijos heredados también pueden ser utilizadas, además de los 2falsos parallax que por manidos no he nombrado, para lo contrario de las demos anteriores.

Como por ejemplo este revelado de información:

See the Pen ZpZGZN by Kseso (@Kseso) on CodePen.

O para recrear una vieja demo del blog: "Ventana abierta al fondo del body: recortes en el background"

Como ves, en CSS no hay límites. O dicho de otra forma, los límites en CSS te los pones tú.

See the Pen dpvZYw by Kseso (@Kseso) on CodePen.

En CSS no hay límites. Los límites en CSS te los pones tú y tus pocas ganas de enredar y experimentar.

Créditos y atribución: todas las imágenes usadas en los pens obtenidas de unsplash, excepto la imagen de la mano que proviene de Filippo Bello.

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