- Página Inicial
- Códigos CSS Prontos
- Como fazer um accordion com HTML e CSS
- Voltar
Como fazer um accordion com HTML e CSS
Neste tutorial vamos criar um accordion com html e css
.
Nesta seção, projetaremos uma estrutura simples na tag <div>, <input>, <h1>, <label> , <p> e a tag <href> para inserir o link de destino.
Essas são as tags que usaremos para criar o nosso accordion
com html e CSS puro.
Vamos Adicionar o HTML
<div class="accordion"> <input type="checkbox" id="faq-1"> <h1><label for="faq-1">O que é Html ?</label></h1> <div class="texto"> <p> HTML é uma linguagem de marcação utilizada na construção de páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto da junção entre os padrões HyTime e SGML. HyTime é um padrão para a representação estruturada de hipermídia e conteúdo baseado em tempo. </p> </div> </div> <div class="accordion"> <input type="checkbox" id="faq-2"> <h1><label for="faq-2">O que é Css ?</label></h1> <div class="texto"> <p> Cascading Style Sheets é um mecanismo para adicionar estilos a uma página web, aplicado diretamente nas tags HTML ou ficar contido dentro das tags style. Também é possível, adicionar estilos adicionando um link para um arquivo CSS que contém os estilos. </p> </div> </div> <div class="accordion"> <input type="checkbox" id="faq-3"> <h1><label for="faq-3">Como aprender Html e Css ?</label></h1> <div class="texto"> <p> Acompanhe o Blog <a href="https://www.loopnerd.com.br"><b>Loop Nerd</b> </a>.<br> Aprenda códigos html e css, artigos do básico ao mais avançado. </p> </div> </div>
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso
.accordion
.accordion{ max-width: 500px; margin: auto; position: relative; box-shadow: 1px 0px 1.2px 0px #e3e3e3; } .accordion input{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity:0; visibility: 0; } .accordion h1{ background:#007cff; color:white; font-size: 1em; padding: 0.8em 1em; position: relative; transition: 0.5s; } .accordion h1:hover { background-color:#0762c2; color:#eee003; } .accordion label::before{ content:""; display: inline-block; border: 8px solid transparent; border-left:12px solid white; } .accordion label{ cursor: pointer; position: relative; display: flex; align-items: center; } .accordion div.texto{ max-height:0px; overflow: hidden; transition:max-height 0.5s; background-color: white; box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2); } .accordion div.texto p { padding:1em; position: relative; z-index: 1; } .accordion input:checked ~ h1 label::before{ border-left:8px solid transparent; border-top:12px solid white; margin-top:12px; margin-right:10px; } .accordion input:checked ~ h1 ~ div.texto{ max-height:200px; } .accordion a{ color:#007cff; }
Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
1.166 Visualizações
Deixe um comentário