Blog do MX Cursos

Criando Accordion com CSS3

Avaliar post

Quando se pensa em criar efeitos de interação, pensamos em recorrer ao javascript. Na tríade, HTML (marcação), CSS (estilo) e Javascript (Comportamento), é natural pensarmos no Javascript.

Mas é possível ter esses mesmos efeitos utilizando apenas o CSS3.

Nesse tutorial, mostrarei como criar um efeito accordion (sanfona), utilizando apenas o HTML e CSS3.

Vamos começar

Criaremos o arquivo index.html e definir a nossa estrutura.

Explicando o código acima:

  • Na linha 6, chamamos o arquivo style.css que irá conter o estilo da nossa página, incluído a configuração do efeito;
  • Na linha 9 é um wrapper que irá conter todos itens do accordion;
  • Na linha 10, 15, 20 são os elementos que irão agrupar cada item da aba;
  • Na linha 11, 16, 21, são elementos de input do tipo radio;
  • Na linha 12, 17, 22 são elementos de label, que são associados aos input, pelo atributo for;
  • Na linha 13, 18, 23, são elementos que irão conter o conteúdo a ser exibido.

A lógica aplicada para criação do efeito é verificar o elemento do input do tipo rádio que está marcado e mostrar o conteúdo que está precedido dele.

Veremos dois tipos de seletores:

[atributo ^=valor] => Esse seletor informa que deseja selecionar qualquer atributo que comece com determinado valor.

Elemento1  ~  Elemento2 => Esse seletor informa que quero selecionar qualquer Elemento2 que esteja precedido do Elemento1.

Agora vamos criar o arquivo style.css:

Explicando o código acima:

  • Na linha 1 a 5, configuramos o container dos elementos do accordion;
    • Definimos uma largura;
    • Centralizamos na horizontal;
    • Adicionamos uma borda;
  • Na linha 6 a 8, ocultamos o elemento input;
  • Na linha 9 a 15, configuramos o label que será “clicável”;
    • Renderizamos o elemento em bloco;
    • Adicionamos uma borda;
    • Definimos uma cor de fundo;
    • Definimos o ponteiro do cursor como algo “clicável”;
    • Adicionamos um padding para um espaçamento interno.
  • Na linha 16 a 24, configuramos o elemento que engloba o conteúdo;
    • Definimos a altura como “0” para ser aplicado o efeito;
    • O overflow:hidden não mostra o último item;
    • O transition define o tipo de efeito que queremos:
      • height: define a propriedade que terá a transição;
      • 0.3s => define o tempo desta transição;
      • ease-in-out => define como será o comportamento desta transição.
  • Na linha 25 a 27,  selecionamos o elemento que está precedente e que seja do tipo atributo checked, sendo que o ID inicia o accordion. E assim definimos uma altura, mostrando o conteúdo.

Você pode conferir o efeito final acessando o link abaixo:

https://blog.mxcursos.com/exemplos/accordion-css3

Baixe os arquivos usados neste tutorial.

https://github.com/davidchc/tutorial-efeito-accordion-css3

Gostou do artigo? Compartilhe com seus amigos.

Um abraço e até a próxima.

Your Header Sidebar area is currently empty. Hurry up and add some widgets.

Newsletter

Newsletter

Receba em seu e-mail conteúdos semanais sobre desenvolvimento, design, audiovisual e tecnlogia.

Inscrição realizada com sucesso!