Tableless

Busca Menu

Destaques responsivos

Seja o primeiro a comentar por

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:

<div class="highlights">
  <div class="highlights-item">
    <img src="assets/images/chaves.jpg" />
    <p>Olha o Chaves sorrindo</p>
  </div>

  <div class="highlights-item">
    <img src="assets/images/chaves-2.jpg" />
    <p>Pensando na Paty</p>
  </div>

  <div class="highlights-item">
    <img src="assets/images/chaves-3.jpg" />
    <p>Quero tanto esse sanduiche iche iche</p>
  </div>
</div>

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:

.highlights-item {
  float: left;
  margin: 0 0 0 2%;
  width: 32%;
}

.highlights-item:first-of-type {
  margin-left: 0;
}

.highlights-item img {
  display: block;
  width: 100%;
  margin: 0 0 5px;
}

.highlights-item p {
  font-size: 14px;
  text-align: center;
}

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:

<div class="highlights">
  <input type="radio" id="radio-img1" name="highlights" checked="checked" />
  <div class="highlights-item">
    <img src="assets/images/chaves.jpg" />
    <p>Olha o Chaves sorrindo</p>
  </div>
  ...
</div>

O CSS PARA TRANSFORMAR

Com o html simples para 3 colunas, vamos transformar em uma galeria suave com o ‘media screen’, ‘transition’ e ‘transform’.

@media screen and (max-width: 767px) {
  .highlights-item {
    width: 100%;
    margin-left: 0;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
}

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:

@media screen and (max-width: 767px) {
   /*checked*/
  .highlights input:checked + div {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

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’.

NAVEGAÇÃO COM LABEL

Para selecionar cada radio, precisamos relacionar cada label usando o for e vamos adicionar o seguinte html:

<div class="highlights">
  ...
  <input type="radio" id="radio-img3" name="highlights" />
  <div class="highlights-item">
    ....
  </div>

  <div class="highlights-buttons">
    <label for="radio-img1">Image 1</label>
    <label for="radio-img2">Image 2</label>
    <label for="radio-img3">Image 3</label>
  </div>
</div>

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.

.highlights-buttons {
  display: none;
  clear: both;
  text-align: center;
}

.highlights-buttons label {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 10px; 
  border-radius: 10px;
  background-color: #ccc;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-indent: -9999px;
  -webkit-transition: background-color 300ms ease-in-out;
  transition: background-color 300ms ease-in-out;
}
/*exibindo os botões*/
@media screen and (max-width: 767px) {
  .highlights-buttons {
    display: block;
  }
}

Estamos falando de css puro e sempre precisamos definir o que vai ser feito, veja como aplicar o label ativo nessa estrutura que criamos:

.highlights input:nth-of-type(1):checked ~ .highlights-buttons label:nth-child(1),
.highlights input:nth-of-type(2):checked ~ .highlights-buttons label:nth-child(2),
.highlights input:nth-of-type(3):checked ~ .highlights-buttons label:nth-child(3) {
  background-color: #000;
}

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

Publicado no dia