1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
Em relação aos estilos:
- A seção hero não terá uma altura estática como 100vh. Sua altura dependerá do conteúdo da sobreposição. Apenas para mostrar uma parte maior da imagem, também daremos alguns preenchimentos superiores e inferiores relevantes para a altura da janela de visualização.
- Neste ponto, adicionaremos a imagem de fundo através do CSS.
Aqui está a regra CSS correspondente:
1 |
.hero { |
2 |
padding: 20vh 0; |
3 |
background-image: url(IMAGE_URL); |
4 |
}
|
E a demonstração resultante:
Seção de herói com várias imagens de fundo
Até agora tudo bem! Mas vamos supor que esse layout represente uma única postagem de blog ou design de produto. Obviamente, num site podemos ter vários posts/produtos com conteúdos diferentes.
Nesse caso, existem dois requisitos:
- O administrador do site deve poder alterar a imagem e sua posição através do administrador.
- Deve haver três imagens de fundo diferentes dependendo do tamanho da janela de visualização. Este é um requisito comum, pois na maioria das vezes uma única imagem não ficará bem em todas as telas.
Em termos de visualização disso em nosso CMS, teremos algo assim:
Para este exemplo, usei o popular plugin ACF WordPress para criar os campos. Mas, claro, no seu caso, você pode construí-las como desejar e elaborar para exibir as dimensões de imagem recomendadas para auxiliar os criadores de conteúdo.
Sob esses requisitos, temos que pensar em uma forma de mostrar imagens diferentes dependendo do tamanho da janela de visualização.
Método nº 1: marcação extra
Uma solução é criar alguns extras div elementos que serão posicionados de forma absoluta dentro da seção e os farão aparecer em momentos diferentes com a ajuda das classes de visibilidade do UIkit. Então, como as imagens vêm dinamicamente por meio de uma linguagem do lado do servidor como PHP, também as adicionaremos por meio de CSS inline. O mesmo acontecerá com as posições de fundo.
Com isso em mente, aqui está a nova versão da marcação da seção hero:
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
Certifique-se de inspecionar estes divse examine o que suas classes UIkit anexadas fazem.
A demonstração relacionada:
Método nº 2: variáveis CSS
Uma forma mais elegante que nos ajuda a evitar o inchaço da marcação com elementos vazios, ou mesmo a duplicação de coisas, aproveita as variáveis CSS. Esta ideia é simples; mantemos a marcação inicial e definimos três variáveis CSS; uma variável para cada imagem. O mesmo deve acontecer com as posições de fundo, mas vamos pular isso por enquanto.
Então, dentro do CSS, definimos regras apropriadas com base nos pontos de interrupção do UIkit que controlam qual imagem deve aparecer a cada vez. Dessa forma, mantemos a simplicidade da demonstração inicial e permitimos o recebimento de conteúdo dinâmico.
Com isso em mente, aqui está a nova versão da marcação da seção hero:
1 |
|
2 |
|
3 |
|
Os estilos associados:
1 |
.hero { |
2 |
background-image: var(--bg-image-mobile); |
3 |
}
|
4 |
|
5 |
@media (min-width: 960px) { |
6 |
.hero { |
7 |
background-image: var(--bg-image-tablet); |
8 |
}
|
9 |
}
|
10 |
|
11 |
@media (min-width: 1200px) { |
12 |
.hero { |
13 |
background-image: var(--bg-image-desktop); |
14 |
}
|
15 |
}
|
E finalmente, a demonstração relacionada:
Conclusão
Como você pode ver, as variáveis CSS podem nos ajudar a realizar tarefas comuns sem esforço, sem envolver JavaScript. Além do truque que discutimos aqui com imagens, outro ótimo uso para elas é a criação de animações surpreendentes – já abordamos isso muitas vezes! Por exemplo, confira estes tutoriais:
Como sempre, muito obrigado pela leitura!
