Transição entre duas seções
Grátis, sem cadastro, roda no seu navegador.
Onde duas seções de cores diferentes se encontram no meio de uma página. As camadas trabalham mais aqui do que em qualquer outro lugar, porque há duas cores a conciliar e não uma borda a decorar.
A receita
| Forma | Ondas em camadas |
|---|---|
| Exportar como | Fundo CSS |
| Tamanho | 1.071 B |
Passo a passo
- Escolha Ondas em camadas para obter várias curvas de uma mesma semente.
- Defina as duas cores como as cores das seções de cima e de baixo.
- Exporte como Fundo CSS e aplique a uma div vazia e curta entre as duas seções.
- Dê a essa div uma altura fixa — uma imagem de fundo não tem altura intrínseca para lhe dar uma.
O que você vai copiar
.shape {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M-288 95.89C-240 100.43,-96 109.48,0 123.14C96 136.8,192 170.05,288 177.86C384 185.66,480 180.48,576 169.98C672 159.48,768 126.46,864 114.84C960 103.23,1056 95.46,1152 100.31C1248 105.15,1392 136.65,1440 143.92L1440 320L-288 320Z' fill='%23a5b4fc' opacity='0.35'…Em mais detalhe
A div vazia é a parte que vale acertar. Uma `background-image` não dimensiona o próprio elemento, então uma div sem altura é uma div sem forma dentro — o motivo mais comum de esta receita parecer não fazer nada. Dê a ela uma altura nas mesmas unidades do resto do seu espaçamento e use `background-size: cover` para a forma preencher em qualquer largura.
Perguntas
De qual forma devo partir para Transição entre duas seções?
Ondas em camadas, exportada como Fundo CSS. Essa combinação é a que estrutura esta página, e a pré-visualização acima é exatamente essa forma — mas é um ponto de partida, não uma regra. Todos os controles continuam ativos assim que você a abre.
Quanto isso adiciona à página?
Cerca de 1.071 bytes para esta combinação. É menos que um único ícone e não precisa de nenhuma requisição de rede, porque a forma é marcação e não um arquivo de imagem.
Vai funcionar no celular?
Sim. Um divisor de onda é configurado para esticar até o contêiner em vez de manter a proporção, e é isso que permite que uma única forma cubra qualquer largura de tela sem tarjas. Blobs mantêm as proporções, já que um blob esticado é só uma elipse.
Cada número e cada forma desta página foram produzidos rodando o gerador no momento do build, então descrevem a ferramenta que você está prestes a usar e não uma versão dela que já existiu.