Nuestro querido amigo Robin tiene un nuevo ensayo llamado Elogio de las sombras. Ahora, antes de saltar allí en busca de pepitas sobre sombras de cuadro CSS, sombras de texto y filtros de sombra... esto es eso no. Es un ensayo sobre fotografía y lo que Robin ha aprendido acerca de manejar sombras con una cámara.
Entonces, ¿por qué compartir esto? Porque es genial que haya creado una página dirigida a un artículo dedicada a un ensayo. Y aprenderá mucho sobre CSS si abre DevTools en él:
- Técnicas de centrado. Observe cómo se usa CSS Grid en el
<body>simplemente para centrar el folleto. Luego, Robin vuelve a alcanzarlo en cada.framedel ensayo para hacer lo mismo con el contenido. - Imágenes de fondo "falsas". Robin podría haber hecho mucho trabajo por sí mismo creando una clase CSS para cada
.framepara obtener las imágenes de fondo. En cambio, usaobject-fit: coveren HTML en línea<img>s para mantener la relación de aspecto mientras llena el.frameenvase. (Él es en realidad escrito sobre esto antes). Eso seguro ahorra mucho CSS, pero también le permite usar texto alternativo si es necesario. Me pregunto si un<figure>/<figcaption>La estructura podría haber funcionado aquí, pero dudo que proporcione muchos beneficios adicionales para lo que está sucediendo. - Apilamiento de contextos. ¿Otra ventaja de esas imágenes de fondo falsas? Utilizan un posicionamiento absoluto que crea un contexto de apilamiento, lo que permite a Robin establecer un
z-index: 0en las imágenes De esa manera, el texto se apila directamente encima conz-index: 1. Una vez más, CSS Grid está manejando todo el centrado para que las cosas estén bien alineadas. - Ajuste de desplazamiento. Yo siempre amar cuando veo que el desplazamiento de CSS se ajusta en la naturaleza. Robin hizo una buena elección al usarlo aquí, ya que realmente se presta a toda la experiencia de pasar las páginas mientras se desplaza por los marcos. El desplazamiento horizontal puede ser enloquecedor, pero también extremadamente elegante cuando se ejecuta bien, como lo es aquí en la forma en que mejora el diseño de columna estrecha. Si quieres una buena explicación de cómo funciona todo, Robin también tiene escrito sobre ajuste de desplazamiento horizontal.
Por lo menos, Robin es un excelente escritor y vale la pena leer todo lo que publica, CSS y más.
