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 usaobject-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 comz-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.
No mínimo, Robin é um excelente escritor e vale a pena ler tudo o que ele publica, CSS e muito mais.
- background-image
- blockchain
- C + +
- centrar
- código
- Coingenius
- Truques CSS
- Grade
- Java
- LINK
- token não fungível
- ajuste ao objeto
- OpenSea
- PHP
- platão
- platão ai
- Inteligência de Dados Platão
- Jogo de Platão
- Platoblockchain
- PlatãoData
- jogo de platô
- Polygon
- Python
- Reagir
- encaixe de rolagem
- smart contract
- Solana
- contextos de empilhamento
- Vyper
- Web3
- zefirnet