Função toggle - Pure CSS Seg 15 Set 2014 - 20:41
Como o título já diz, é uma forma em puro CSS de amostrar um determinado conteúdo, parecido com um spoiler.
Resultado:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
O código utilizado:
O código é feito apenas com CSS, nada de JavaScript. Poderão está estudando e o código para aprender mais o funcionamento das camadas CSS.
Estarei trazendo mais códigos pra que vejam como algumas coisas são simples de serem feitas. ^^
Não sei pra que o código servirão pra Forumeiros, mas se arranjarem uma funcionalidade pro mesmo me avisem kk.
Demo board: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Espero que gostem! ;D , breve postarei um tutorial sobre como fazer este código (nível intermediário)
Resultado:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
O código utilizado:
- Código:
<!DOCTYPE html>
<html>
<head>
<title>Apenas testes</title>
<meta charset="utf-8" />
<style type="text/css">
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
}
#bs input[type="checkbox"],
.tabconts {
display:none
}
#bs input[type="checkbox"]:checked + div.tabconts {
display: block;
}
.btn.btn-primary {
background: #5CB5F4;
padding: 7px;
margin: 3px;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
border: 1px solid rgb(0, 117, 166);
border-radius: 4px;
color: #fff;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 6px;
}
div#bs {
margin-top: 10px;
}
.tabconts {
margin-top: 13px;
margin-left: 3px;
font-size: 14px;
border: 1px solid #eee;
width: 31%;
padding: 5px;
background: transparent;
position: relative;
}
.btn.btn-primary:hover {
background: #4AA6E8;
border: 1px solid rgb(12, 98, 133);
transition-duration: 1s;
color: #eee;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
}
cmt {
color: #ddd
}
</style>
</head>
<body>
<div id="bs">
<label class="btn btn-primary" for="tabsm"> Exibir </label>
<input type="checkbox" id="tabsm" />
<div class="tabconts">
<cnt>Conteúdo a ser mostrado <br /></cnt>
<cmt>Comentário a ser mostrado</cmt><br />
<cont>Conteúdo a ser mostrado 2</cont><br />
<cmt>Comentário a ser mostrado 2</cmt>
</div>
</div>
</body>
</html>
O código é feito apenas com CSS, nada de JavaScript. Poderão está estudando e o código para aprender mais o funcionamento das camadas CSS.
Estarei trazendo mais códigos pra que vejam como algumas coisas são simples de serem feitas. ^^
Não sei pra que o código servirão pra Forumeiros, mas se arranjarem uma funcionalidade pro mesmo me avisem kk.
Demo board: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Espero que gostem! ;D , breve postarei um tutorial sobre como fazer este código (nível intermediário)
Última edição por Target em Seg 15 Set 2014 - 23:12, editado 2 vez(es)
