Oito dicas de CSS para layouts e efeitos avançados
Publicados: 2022-03-11O domínio do desenvolvimento front-end da Web fez um progresso considerável nos últimos anos. No entanto, o front-end da Web, como os usuários o vêem, ainda é o mesmo: marcação HTML estilizada com CSS.
Muitos problemas de layout podem parecer simples no início, mas muitas vezes se mostram complicados. Sem amplo conhecimento de como certos recursos CSS funcionam, esses layouts avançados podem parecer impossíveis de alcançar apenas com CSS.
Neste artigo, você encontrará oito dicas e truques de CSS especializados que aproveitam recursos CSS menos conhecidos para implementar alguns desses layouts e efeitos avançados.
1. Maximizando seletores de irmãos CSS
O problema: você está perdendo oportunidades de otimização por não usar seletores irmãos.
A solução: use seletores de irmãos sempre que fizer sentido. Sempre que você estiver trabalhando com uma lista de itens e precisar tratar o primeiro ou o último item de maneira diferente, seu primeiro instinto pode ser usar os pseudo seletores CSS :first-child e :last-child .
Por exemplo, ao criar um ícone de menu de hambúrguer somente CSS:
Veja o Pen Maximizing CSS Sibling Selectors 1 de Rico Mossesgeld (@ricotheque) no CodePen.
Isso faz sentido: cada barra tem uma margem inferior, exceto a última.
No entanto, o mesmo efeito também é possível através do seletor irmão adjacente (+):
Veja o Pen Maximizing CSS Sibling Selectors 2 de Rico Mossesgeld (@ricotheque) no CodePen.
Isso também faz sentido: tudo após a primeira barra tem uma margem superior. Esse truque de CSS não apenas economiza alguns bytes extras (que podem ser facilmente adicionados a qualquer projeto de tamanho médio), mas também abre um mundo de possibilidades.
Considere esta lista de cartas:
Veja o Pen Maximizing CSS Sibling Selectors 3 de Rico Mossesgeld (@ricotheque) no CodePen.
Cada um tem um título e texto, o último dos quais está oculto por padrão. Se você deseja tornar visíveis apenas o texto do cartão ativo (com a classe .active ) e os que o seguem, você pode fazê-lo rapidamente usando apenas CSS:
Veja o Pen Maximizing CSS Sibling Selectors 4 de Rico Mossesgeld (@ricotheque) no CodePen.
Com um pouco de JavaScript, isso também pode ser interativo.
Confiar apenas no JavaScript para tudo isso, no entanto, resultaria em um script como este:
Veja o Pen Maximizing CSS Sibling Selectors 5 de Rico Mossesgeld (@ricotheque) no CodePen.
onde incluir jQuery como uma dependência permite que você tenha um código um pouco curto.
2. Dimensionamento consistente de elementos HTML
O problema: os elementos HTML têm tamanhos inconsistentes em diferentes navegadores.
A solução: defina box-sizing para todos os elementos para border-box . Uma ruína de longa data para os desenvolvedores da Web, o Internet Explorer fez uma coisa certa: dimensionou as caixas corretamente.
Outros navegadores apenas observam o conteúdo ao calcular a largura de um elemento HTML, com todo o resto tratado como excedente. A width: 200px div, com preenchimento de 20px e uma borda de 2px , renderiza como 242 pixels de largura.
O Internet Explorer considera o preenchimento e a borda como parte da largura. Aqui, a div de cima teria 200 pixels de largura.
Veja o Pen CSS Box Model Demo 1 por Rico Mossesgeld (@ricotheque) no CodePen.
Depois de pegar o jeito, você achará a última abordagem mais lógica, mesmo que não siga os padrões.
Se eu disser que a largura é de 200px, caramba, será uma caixa de 200px de largura, mesmo que eu tenha 20px de preenchimento.
De qualquer forma, o CSS a seguir mantém os tamanhos dos elementos (e, portanto, os layouts) consistentes em todos os navegadores:
Veja o Pen CSS Box Model Demo 2 por Rico Mossesgeld (@ricotheque) no CodePen.
O segundo conjunto de seletores CSS protege os elementos HTML estilizados sem a caixa de borda em mente contra a interrupção do layout.
box-sizing: border-box é tão útil que faz parte de um framework CSS relativamente popular chamado repair.css.
3. Elementos de Altura Dinâmicos
O problema: manter a altura de um elemento HTML proporcional à sua largura.
A solução: Use o preenchimento vertical como substituto da altura.
Digamos que você queira que a altura de um elemento HTML sempre corresponda à largura do CSS. height: 100% não altera o comportamento padrão dos elementos correspondentes à altura de seu conteúdo.
Veja o Pen Dynamic Height Elements 1 de Rico Mossesgeld (@ricotheque) no CodePen.
A resposta é definir a altura para 0 e usar padding-top ou padding-bottom para definir a altura real de .container . Qualquer propriedade pode ser uma porcentagem da largura do elemento:
Veja o Pen Dynamic Height Elements 2 de Rico Mossesgeld (@ricotheque) no CodePen.
Agora .container permanecerá um quadrado não importa quão largo ele se torne. overflow: hidden impede que o conteúdo longo quebre essa proporção.
Essa técnica, com algumas modificações, é ótima para criar incorporações de vídeo que mantêm sua proporção em qualquer tamanho. Apenas alinhe a incorporação com a posição superior e esquerda de .container position: absolute , defina ambas as dimensões da incorporação para 100% para que ela "preencha" .container e altere o padding-bottom de .container para corresponder ao aspecto do vídeo Razão.
Veja o Pen Dynamic Height Elements 3 de Rico Mossesgeld (@ricotheque) no CodePen.
position: relative for .container garante que o posicionamento absoluto do iframe funcione corretamente. O novo padding-bottom é apenas a altura da proporção de aspecto dividida por sua largura, vezes 100. Por exemplo, se a proporção da incorporação de vídeo for 16:9, a porcentagem de preenchimento inferior deverá ser 9 dividido por 16 (0,5625) e multiplicado por 100 (56,25).
4. Elementos dinâmicos de largura
O problema: manter a largura de um elemento HTML proporcional à sua altura.
A solução: use font-size como base para as dimensões do elemento.
Agora, e o inverso, ou contêineres que mudam de largura conforme a altura? Desta vez, é font-size para o resgate. Lembre-se de que largura e altura podem estar em em s, o que significa que podem ser uma proporção do font-size do elemento.
Um elemento com font-size de 40px, largura de 2em e altura de 1em teria 80 pixels (40 x 2) de largura e 40 pixels (40 x 1) de altura.
Veja os Pen Dynamic Width Elements de Rico Mossesgeld (@ricotheque) no CodePen.
Quer mudar a altura de .container ? Mudar TAMANHO DA FONTE.
A única ressalva é que é impossível fazer com que o tamanho da fonte de um elemento corresponda à altura de seu pai automaticamente apenas por meio de CSS. No entanto, essa técnica permite que um script de redimensionamento Javascript seja cortado de:
var container = document.querySelector( '.container' ); container.style.height = yourDesiredHeight + 'px'; container.style.width = yourDesiredHeight * yourDesiredRatio + 'px';para:
document.querySelector( '.container' ).style.fontSize = yourDesiredHeight + 'px';5. Centralização Vertical de Conteúdo Dinâmico
O problema: manter um elemento HTML (com altura desconhecida) centralizado verticalmente dentro de outro.
A solução: defina o elemento externo para display: table e converta o elemento interno em uma table-cell CSS. Ou apenas use CSS Flexbox.
É possível centralizar verticalmente uma linha de texto com line-height :
Veja a Centralização vertical da caneta de conteúdo dinâmico 1 por Rico Mossesgeld (@ricotheque) no CodePen.
Para várias linhas de texto ou conteúdo não textual, as tabelas CSS são a resposta. Defina a exibição de .container como table e use display: table-cell e vertical-align: middle para .text :
Veja o Pen Vertical Centering of Dynamic Content 2 por Rico Mossesgeld (@ricotheque) no CodePen.
Pense neste truque de CSS como o equivalente vertical de margin: 0 auto . O Flexbox do CSS3 é uma ótima alternativa para essa técnica se o suporte a bugs do Internet Explorer for aceitável:
Veja o Pen Vertical Centering of Dynamic Content 3 por Rico Mossesgeld (@ricotheque) no CodePen.
6. Colunas de Mesma Altura
O problema: manter as colunas com a mesma altura.
A solução: para cada coluna, use um valor margin-bottom grande negativo e cancele-o com um padding-bottom igualmente grande. Tabelas CSS e Flexbox também funcionam.
Usando float ou display: inline-block , é possível criar colunas lado a lado através de CSS.
Veja o Pen Same-Height Columns 1 de Rico Mossesgeld (@ricotheque) no CodePen.
Observe o uso de box-sizing: border-box para dimensionar corretamente os .cols . Consulte Dimensionamento de elemento HTML consistente acima.
As bordas da primeira e da última coluna não vão até o fim; eles não correspondem à altura da segunda coluna mais alta. Para corrigir isso, basta adicionar overflow: hidden a .row . Em seguida, defina o fundo da margin-bottom cada .col como 99999px e seu padding-bottom para 100009px (99999px + o preenchimento de 10px aplicado aos outros lados do .col ).
Veja o Pen Same-Height Columns 2 de Rico Mossesgeld (@ricotheque) no CodePen.
Uma alternativa mais direta é o Flexbox. Novamente, use isso apenas se o suporte ao Internet Explorer não for obrigatório.
Veja o Pen Same-Height Columns 3 de Rico Mossesgeld (@ricotheque) no CodePen.
Mais uma alternativa com melhor suporte ao navegador: tabelas CSS (sem vertical-align: middle ).
Veja o Pen Same-Height Columns 4 de Rico Mossesgeld (@ricotheque) no CodePen.
7. Indo além da caixa
O problema: caixas e linhas retas são tão clichês.
A solução: Use transform: rotate(x) ou border-radius .
Pegue uma série típica de painéis de um site de marketing ou brochura: uma pilha vertical de slides com um ponto singular. Sua marcação e CSS podem ser algo assim:
Veja a caneta Going Beyond the Box 1 de Rico Mossesgeld (@ricotheque) no CodePen.
Ao custo de tornar a marcação muito mais complicada, esses painéis quadrados poderiam ser transformados em uma pilha de paralelogramos.
Veja a caneta Going Beyond the Box 2 de Rico Mossesgeld (@ricotheque) no CodePen.
Tem muita coisa acontecendo aqui:
A altura de cada painel é controlada por .pane-container. A margem inferior negativa garante que os painéis se empilhem perfeitamente.
-
.pane-background, seu filho.mask-boxe seu neto.imageestão todos configurados paraposition: absolute. Cada elemento tem valores diferentes detop,left,bottomeright. Isso elimina qualquer espaçamento criado pelas rotações detalhadas abaixo. -
.mask-boxé girado 2 graus (sentido anti-horário). -
.imageé girado -2 graus para neutralizar a.mask-box. - O
.mask-boxfica oculto para que seus lados superior e inferior girados cortem o elemento.image.
Em uma nota relacionada, transformar uma imagem em um círculo ou oval é simples. Basta aplicar border-radius: 100% ao elemento img .
Veja a caneta Going Beyond the Box 3 de Rico Mossesgeld (@ricotheque) no CodePen.
Modificações de CSS em tempo real como essas diminuem a necessidade de preparar o conteúdo antes de ser publicado em um site. Em vez de aplicar uma máscara circular a uma foto no Photoshop, o desenvolvedor da Web pode aplicar o mesmo efeito por meio de CSS sem alterar a foto original.
A vantagem adicional é que, ao deixar o conteúdo intocado e não depender do design atual do site, futuras reformulações ou reformulações são facilitadas.
8. Modo Noturno
O problema: Implementar um modo noturno sem criar uma nova folha de estilo.
A solução: Use filtros CSS.
Alguns aplicativos apresentam um modo noturno, onde a interface escurece para melhor legibilidade sob pouca luz. Em navegadores mais novos, os filtros CSS podem criar o mesmo efeito, aplicando efeitos semelhantes ao Photoshop.
Um filtro CSS útil é o invert , que (sem surpresa) inverte as cores de tudo dentro de um elemento. Isso torna desnecessária a criação e aplicação de um novo conjunto de estilos.
Veja o Pen Night Mode 1 de Rico Mossesgeld (@ricotheque) no CodePen.
Usar este filtro em texto preto e fundo branco simula o modo noturno. !important garante que essas novas cores substituam quaisquer estilos existentes.
Veja o Pen Night Mode 2 de Rico Mossesgeld (@ricotheque) no CodePen.
Infelizmente, a imagem parece estranha, porque suas cores foram invertidas com todo o resto. A boa notícia é que vários filtros podem ser aplicados ao mesmo tempo. Adicionar o filtro hue-rotate faz com que as imagens e outros conteúdos visuais voltem ao normal:
Veja o Pen Night Mode 3 de Rico Mossesgeld (@ricotheque) no CodePen.
Por que isso funciona? hue-rotate(180deg) apenas cria o mesmo efeito que o invert(1) . Aqui está uma demonstração de como o CSS no modo noturno funcionaria quando alternado por meio de um botão com JavaScript.
Aproveite ao máximo o CSS
A menos que o navegador ou como os sites são construídos mudem drasticamente no futuro, um bom conhecimento de CSS continuará sendo uma habilidade fundamental no espaço de desenvolvimento web.
Todas essas dicas de CSS compartilham algo em comum: elas maximizam o uso de CSS como linguagem de estilo, deixando o próprio navegador fazer o trabalho pesado. E, quando bem feito, isso sempre trará melhores resultados, melhor desempenho e, portanto, uma melhor experiência do usuário.
Deixe-nos saber se você tem algum truque de CSS que você acha interessante e útil na seção de comentários abaixo.