Criando efeito sanfona com CSS3

No tutorial Brincando com os Seletores CSS3, mostrei como criar um sistema de abas, apenas com CSS3. Nesse tutorial, vamos criar um efeito sanfona, utilizando os mesmos princípios, apenas acrescentando um efeito para incrementar.

Vamos ao html:

  <div class="accordions">

            <div class="accordion-item">
                <input type="checkbox" name="accordion" checked="checked" id="accordion-1" />
                <label for= "accordion-1">Empresa</label>
                <div class="accordion-content">Minha Empresa</div>
            </div>

            <div class="accordion-item">
                <input type="checkbox" name="accordion" id="accordion-2" />
                <label for= "accordion-2">Serviços</label>
                <div class="accordion-content">Meus Serviços</div>
            </div>

            <div class="accordion-item">
                <input type="checkbox" name="accordion" id="accordion-3" />
                <label for= "accordion-3">Contatos</label>
                <div class="accordion-content">Meus Contatos</div>
            </div>
        </div>

Vamos ver os elementos do nosso HTML:

  • Temos um elemento que irá todos itens da sanfona (.accordions)
  • Cada item é englobado por .accordion-item
  • Dentro desse item, temos um input do type checkbox. um label, associado a esse input e uma div.accordion-content, que irá ter o conteúdo.
  • Veja que o primeiro input, já está como atributo checked, para já iniciar aberto.

A lógica será muito parecida com as abas. Verifica o elemento do input que está marcado, e mostramos o conteúdo que está precedido dele.

Vamos ao CSS

          /**
            * Definir a largura e centraliza os itens da sanfona
            */
            .accordions{
                width:600px;
                margin:0 auto;
                border:1px solid #ccc;
            }
            /**
            * Oculta o input
            */
            .accordion-item input{display:none;}

            /**
             * Aqui configura o label
             * que será parte clicável
            **/
            .accordion-item label{
                display:block;
                border:1px solid #ccc;
                background:#e5e5e5;
                cursor:pointer;
            }

            /**
            * Aqui o elemento que vai o conteúdo.
            * Define o height:0, para aplicarmos o efeito
            * colocamos overflow:hidden não mostrar o último item
            * O transition o tipo de efeito que queremos
            */
            .accordion-content{
                height: 0px;
                overflow: hidden;
                -webkit-transition: height 0.3s ease-in-out;
                -moz-transition: height 0.3s ease-in-out;
                -o-transition: height 0.3s ease-in-out;
                -ms-transition: height 0.3s ease-in-out;
                transition: height 0.3s ease-in-out;
            }

            /**
            * Selecionar o elemento que está precedente
            * do tipo com atributo checked, sendo
            * que o ID comece o accordion
            * E dentro dele, definimos a altura,
            * mostrando o conteúdo
            */
            [id^=accordion]:checked ~ .accordion-content {
                height: 100px;
            }

O transition, ele recebe alguns parâmetros:

  • height => informamos a propriedade que terá a transição
  • 0.3s => aqui informa o tempo dessa transição
  • ease-in-out => aqui informa o comportamento dessa transição

E na propriedade transition, utilizamos os prefixos para os navegadores.

Vamos ver como ficou o efeito: Clique Aqui

Veja que dessa forma, eu clico no label para abrir, e para fechar também. Caso deseje que clique nele, e outros fecham, basta trocar o tipo do input, para radio.

Com input radio: Clique Aqui

Espero que tenham gostado, e até a próxima.

4 thoughts on “Criando efeito sanfona com CSS3

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *