Criando componentes apenas com CSS

A equipe da Turbosite encontrou uma dica no blog Debug True e resolvemos repassá-la com esta postagem.

Deixando o JavaScript um pouco de lado, mostraremos como fazer alguns componentes, como por exemplo um select customizado, usando apenas CSS. Existem vários plugins JavaScript que fazem, mas por que não fazer apenas com css deixando o site com melhor desempenho e o código mais simples?

Abaixo você pode conferir um ótimo exemplo desse metodologia. Com um simples código CSS é possível criar um accordion para sua página.

Gostou desse efeito? Então continue lendo a postagem e explicaremos todo o funcionamento dessa metodologia.

Na verdade não há muito segredo para se fazer um componente apenas com CSS, o truque está na tag  label. Com a label podemos usar o atributo for e um input (checkbox ou radio) para manipular os eventos das animações, como por exemplo, o evento de click. Vamos explicar melhor com um exemplo bem simples.

Código HTML:

<div class="content">
    <input type="checkbox" id="content-change-color" />
    <p>Aqui é o texto que trocará de cor.</p>
</div>
<label for="content-change-color">clique para trocar a cor do texto.</label>

Código CSS:

#content-change-color:checked + p{
    color: red;
}

Abaixo você pode conferir o funcionamento:

Acreditamos que tenha ficado claro até aqui, para quem não conhece o seletor “+” do css ele é um pattern utilizado para encontrar elementos igual ao .next() do jQuery, ele pega o próximo irmão e coloca o estilo setado, com essa base já da pra entender como funciona mas vou explicar os passos.

Ao clicar na label ele da o check no input que tenha o mesmo id do seu atributo “for” ou no input que estiver dentro da própria label, no css colocamos um estilo pra quando o input estiver com o checked e usamos o “+” para estilizar o próximo elemento.

Podemos ir muito além com outros seletores como por exemplo o “~” que faz uma busca não apenas no irmão mas em todos os irmão que forem interrompidos com outras tags por exemplo, ou mesmo o “>” que pega o primeiro filho.

Para quem quizer saber mais sobre seletores css veja esse link.

Agora que você já conhece um código básico, passamos para a construção de um componente accordion. Abaixo você confere o código para gerar o efeito visto acima:

Código HTML:

<div class="accordion">
    <label>
        <input type="radio" name="accordion-radio" />
        <strong>Título 1</strong>
        <div>Conteúdo 1</div>
    </label>
    <label>
        <input type="radio" name="accordion-radio" />
        <strong>Título 2</strong>
        <div>Conteúdo 2</div>
    </label>
    <label>
        <input type="radio" name="accordion-radio" />
        <strong>Título 3</strong>
        <div>Conteúdo 3</div>
    </label> 
</div>

Código CSS:

.accordion{
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;  
}
  
    .accordion label{
      background: #f1f1f1;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
      display: block;
      margin-top: 1px;
      position: relative;
    }
      .accordion strong{
        box-sizing: border-box;
        display: block;
        height: 34px;
        margin-top: 1px;
        padding: 7px;
        position: relative;
      }  
        .accordion strong:after{
          content: '';
          border: 7px solid transparent;
          border-top: 10px solid #282828;
          position: absolute;
          top: 12px;
          right: 15px; 
          
          -webkit-transition: all .3s ease-out;
          transition: all .3s ease-out;
        }  
        .accordion input{
          height: 34px;
          left: 0;
          opacity: 0;
          position: absolute;
          top: 0;
          width: 100%;
          z-index: 1;
        }
        .accordion input:checked + strong:after{
          top: 4px;
          right: 15px;
          
          -ms-transform: rotate(180deg);
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
        }
        .accordion input:checked + strong + div{
          padding: 10px 20px;
          height: auto;
        }
      .accordion div{
        background: #fff;
        box-sizing: border-box;
        border-top: 1px solid #ccc;
        border-radius: 0 0 5px 5px;
        height: 0;
        padding: 0 20px;
        overflow: hidden;
        -webkit-transition: all .3s ease-out;
        transition: all .3s ease-out;
      }

É claro que esse código ficou maior, porém voltando a atenção apenas a label e input, podemos trocar nosso input de radio para checkbox para podemos abrir mais de um ao mesmo tempo. Como esse exemplo mais completo já da pra imaginar o quanto podemos fazer apenas com css não é?

Não basta apenas ter um site bonito, precisa também de uma Hospedagem confiável e rápida, a Turbosite está a mais de 15 anos prestando serviços em Hospedagem.
Quer saber mais? Acesse: www.turbosite.com.br.