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.
<!doctype html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Accordion com CSS3</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="accordions"> <div class="accordion-item"> <input type="radio" 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="radio" 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="radio" name="accordion" id="accordion-3" /> <label for= "accordion-3">Contatos</label> <div class="accordion-content">Meus Contatos</div> </div> </div> </body> </html>
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:
.accordions{ width:600px; margin:0 auto; border:1px solid #ccc; } .accordion-item input{ display:none; } .accordion-item label{ display:block; border:1px solid #ccc; background:#e5e5e5; cursor:pointer; padding:5px 3px; } .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; } [id^=accordion]:checked ~ .accordion-content { height: 100px; }
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://www.mxcursos.com/blog/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.