Em louvor das sombras

Republicado por Platão

seguidores: 0

Nosso querido amigo Robin tem um novo ensaio chamado Em Louvor das Sombras. Agora, antes de você procurar por pepitas em sombras de caixa CSS, sombras de texto e filtros de sombra… isto é isso não. É um ensaio sobre fotografia e o que Robin aprendeu sobre como passar sombras com uma câmera.

Então, por que compartilhar isso? Porque é muito legal que ele tenha feito uma página direcionada a artigos dedicada a um ensaio. E você aprenderá muito sobre CSS se abrir DevTools nele:

Técnicas de centralização. Observe como CSS Grid é usado no <body> simplesmente para centralize o panfleto. Então Robin pega novamente em cada .frame do ensaio para fazer a mesma coisa com o conteúdo.
Imagens de fundo “falsas”. Robin poderia ter trabalhado muito criando uma classe CSS para cada .frame para obter as imagens de fundo. Em vez disso, ele usa object-fit: cover em HTML embutido <img>s para manter a proporção ao preencher o .frame recipiente. (Ele é na verdade escreveu sobre isso antes.) Isso com certeza economiza muito CSS, mas também permite que ele use texto alternativo, se necessário. Eu meio que me pergunto se um <figure>/<figcaption> estrutura poderia ter funcionado aqui, mas duvido que proporcionasse muitos benefícios adicionais para o que está acontecendo.
Contextos de empilhamento. Outra vantagem dessas imagens de fundo falsas? Eles usam posicionamento absoluto que cria um contexto de empilhamento, permitindo que Robin defina um z-index: 0 nas imagens. Dessa forma, o texto é empilhado diretamente em cima com z-index: 1. Novamente, CSS Grid está cuidando de toda a centralização para que as coisas fiquem bem alinhadas.
Ajuste de rolagem. Eu sempre gosta, é quando vejo a rolagem CSS se encaixando em estado selvagem. Robin fez uma boa escolha para usá-lo aqui, pois ele realmente proporciona toda a experiência de virar a página enquanto rola pelos quadros. A rolagem horizontal pode ser enlouquecedora, mas também extremamente elegante quando bem executada, pois aprimora o design de colunas estreitas. Se você quiser uma boa explicação de como tudo funciona, Robin também tem escrito sobre ajuste de rolagem horizontal.