Se acaba de lanzar un nuevo y fascinante sitio llamado The Markup. Lema: Big Tech te está mirando. Estamos viendo Big Tech. Buen trabajo de Upstatement. El contenido se ve increíble, pero por supuesto, aquí siempre estamos interesados en el diseño y la tecnología. Hay muchas cosas que adorar, desde la tipografía limpia, el diseño interesante y los estados de desplazamiento en ángulo en negrita en los bloques, hasta el elegante motivo de puntos.
El pie de página también es inteligente, ya que parece deslizarse desde debajo del contenido a medida que se desplaza hasta la parte inferior de la página. ¡Hagámoslo!
Aquí está el truco:
- El área de contenido principal es por lo menos
100vhalto. La mayoría de los sitios lo son de todos modos, pero solo para estar seguros. - El área de contenido principal tiene un fondo sólido también, que cubre el pie de página que vamos a esconder detrás de él.
- El pie de página viene después del área de contenido principal en el HTML, así que para asegurarse de que el área de contenido principal se sienta en la parte superior, necesitará un poco de posicionamiento relativo e índice z.
- El pie de página usa posicionamiento pegajoso colocarse en el fondo.
Ese último es el truco más elegante, y en realidad es más elegante de lo que lo hace The Markup. Ellos usan position: fixed; en el pie de página y un número mágico margin-bottom en el contenido principal para que funcione. No se necesitan números mágicos cuando se vuelve pegajoso.
El hecho de que eso funcione tan fácilmente sin números mágicos es bastante sorprendente. ¡Gracias a Stephen Shaw por el truco pegajoso! Mi primer intento con esto usó posiciones fijas y números mágicos, pero es mucho más utilizable sin eso.
Preethi nos mostró una técnica súper similar en 2018. La principal diferencia aquí es usar un degradado lineal en el fondo del cuerpo, que es una buena solución si aplicar un color sólido de alguna manera limita el diseño general.
Video de fotogramas clave
¡Stephen hizo uno!