Elogio de las sombras | trucos CSS
Nuestro querido amigo Robin tiene un nuevo ensayo llamado Elogio de las sombrasAhora, antes de salir a buscar bits en las sombras de cuadro CSS, sombras de texto y filtros de sombra... esto es no estaEste es un ensayo sobre fotografía y lo que Robin ha aprendido acerca de proyectar sombras con una cámara.
Entonces, ¿por qué compartir esto? Porque es genial que haya hecho una página dirigida a un artículo dedicado 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
<body>solo para centrar el folleto.framedel ensayo para hacer lo mismo con el contenido. - Imágenes de fondo "artificiales". 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: coverde HTML en línea<img>s para mantener la relación al llenar el.frameenvase. (De hecho, ha escrito sobre esto antes). Esto ciertamente ahorra mucho trabajo de CSS, pero también le permite usar texto alternativo si es necesario. Me pregunto si<figure>/<figcaption>La estructura podría haber funcionado aquí en su lugar, pero dudo que hubiera proporcionado muchos beneficios adicionales a lo que estaba pasando. - Ordenar contextos. ¿Otro beneficio de estas imágenes de fondo falsas? Utilizan posicionamiento absoluto, lo que crea un contexto de ordenación, lo que permite a Robin establecer
z-index: 0en las imágenes De esta forma, el texto se apila directamente encimaz-index: 1Nuevamente, CSS Grid maneja todo el centrado para que las cosas se alineen bien. - Captura de desplazamiento. Yo siempre amor fue entonces cuando vi que el desplazamiento de css salía a la naturaleza. Robin hizo una buena elección al usarlo aquí, ya que realmente se suma a toda la experiencia de cambiar de página a medida que se desplaza por los marcos. El desplazamiento horizontal puede ser enloquecedor, pero también extremadamente elegante cuando se hace bien como lo es aquí en la forma en que mejora los diseños de columnas estrechas.Si desea una buena explicación de cómo funciona todo, Robin también escribió sobre la captura del desplazamiento horizontal.
Por lo menos, Robin es un excelente escritor y vale la pena leer todo lo que publica, CSS y demás.
Enlace directo →
Subir
Deja una respuesta