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.
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:
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:
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.
Nos últimos anos, testemunhamos uma revolução na forma como os sites são criados, impulsionada pelo…
A animação 3D tem sido uma forma poderosa de contar histórias e criar experiências visuais…
Nos últimos anos, a inteligência artificial (IA) tem revolucionado a forma como criamos e editamos…
Nos últimos anos, a integração da inteligência artificial (IA) na criação de sites tem revolucionado…
Nos últimos anos, a edição de vídeo evoluiu rapidamente com o avanço da tecnologia, e…
A dublagem de filmes desempenha um papel fundamental na indústria cinematográfica, permitindo que obras de…
This website uses cookies.
Ver comentários
Eu preciso de algo que no efeito sanfona que quando o usuário acessa meu site ele está fechado e só abre o que tem dentro da sanfona com o clique do usuário .. vc consegue me ajudar?
Olá! Eu consigo colocar um carrossel dentro do conteúdo do accordion? Eu tentei aqui, de todo jeito, mas não tive sucesso...
A intenção é fazer um hall de imagens ANTES / DEPOIS.
Sim você consegue, muitos do plugins de carrossel ele pega o tamanho dos elementos pra calcular, como no accordion está oculto, ele pode não funcionar.
Nesses casos, vc tem q chamar o carrossel quando clicar pra mostrar o item do accordion