Hoje criaremos três destaques com um comportamento totalmente responsivo.
Com um crescimento das SPAs e seguindo o mesmo conceito do artigo anterior, vou passar agora de uma forma simples de como usar, o input radio para transformar nossos destaques em galeria navegável.
Aproveitando
Como já temos um header responsivo, vamos continuar com a mesma estrutura até o final dos artigos só com css e html. Se você ainda não viu como criar um header responsivo, clique aqui.
O HTML
Vamos iniciar realocando a foto do Chaves para um novo formato:
Temos um simples html para 3 itens, deixei os nome das classes mais compreensível e semântico, observado pelo amigo Shankar.
Ver demo sem style.
O CSS
Sempre pensando no responsivo, vamos deixar nossos itens em % para 3 colunas seguindo dessa forma:
Para cada item apliquei 32% em width + 2% em margin-left, se multiplicarmos por 3 a soma é 102% que passa os 100% representado pelo elemento pai. Por estourar o tamanho do pai o terceiro item sempre cai.
Então selecionamos o primeiro item para zerar o margin usando o seletor “:first-of-type”, por que mais adiante vamos adicionar mais elementos e já evitamos quebrar o css se caso usássemos os “first-child”.
Ver demo com style.
O RESPONSIVO
Já apresentada a forma de como usar os seletores, agora vamos adicionar antes de cada item um input radio, veja:
O CSS PARA TRANSFORMAR
Com o html simples para 3 colunas, vamos transformar em uma galeria suave com o ‘media screen’, ‘transition’ e ‘transform’.
Nesse css deixei todos os itens com ‘position absolute’, mas isso faz que todo o conteúdo abaixo dele suba ocupando seu espaço. Mas como teremos um ativo vamos resolver logo abaixo.
Importante lembrar que sempre precisamos de um radio marcado com ‘checked’, quando responder ao responsivo teremos sempre um ativo. Para mostrar o item ativo vamos adicionar as seguintes linhas:
O item que estiver ativo, recebe o ‘position relative’ para bloquear sua área e outras propriedades para exibir suavemente.
Como os type’s dos input’s são ‘radio’, teremos somente um ‘:checked’ por grupo ‘name’.
Para selecionar cada radio, precisamos relacionar cada label usando o for e vamos adicionar o seguinte html:
Por padrão defino ‘display none’ para os botões e com resoluções menores 768px mudamos para ‘block’ para exibir.
LABEL E SEU CSS
Agora que adicionamos os label’s que tem a missão dos botões, vamos inserir uma formatação bem simples.
Estamos falando de css puro e sempre precisamos definir o que vai ser feito, veja como aplicar o label ativo nessa estrutura que criamos:
Para evitar a repetição manual a cada novo item, se você usa SASS ou LESS vai tirar de letra com alguma função.
E PRONTO
Mais uma vez com poucos elementos e css, conseguimos deixar nossos destaques em uma galeria navegável e responsivo.
Veja como ficou o resultado final.
Veja o código completo no github.
CONCLUINDO
Existe diversas maneiras de aplicar no css e quantidades de itens, espero que todos possam aproveitar um pouco do que foi apresentado.
É isso ae pessoal, obrigado