Você não está conectado. Conecte-se ou registre-se

Função toggle - Pure CSS

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 Função toggle - Pure CSS em Seg Set 15, 2014 8:41 pm

Target

avatar
Membro elite

Como o título já diz, é uma forma em puro CSS de amostrar um determinado conteúdo, parecido com um spoiler.

Resultado:


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: http://board-test.forum-livre.com/h8-

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 Set 15, 2014 11:12 pm, editado 2 vez(es)



Olá Convidado,
Leia as regras.
Leia os termos de uso.
Obrigado por se cadastrar no Best Skins Forums!

Cordialmente,
Target.
Ver perfil do usuário http://bestskins.com.br

2 Re: Função toggle - Pure CSS em Seg Set 15, 2014 8:50 pm

delkawy

avatar
Membro ativo

Ótimo código, mas eu não substituo um JavaScript por um CSS.
Porém é ótimo para estudos, como citou.

Ver perfil do usuário

3 Re: Função toggle - Pure CSS em Seg Set 15, 2014 8:57 pm

waghcwb

avatar
Membro elite

@delkawy

E porque não? É muito mais leve...


@Topic

Perfeito cara (:



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

4 Re: Função toggle - Pure CSS em Seg Set 15, 2014 9:19 pm

delkawy

avatar
Membro ativo

@waghcwb 
Bem eu acho mais pratico, mas vai de pessoa pra pessoa.

Ver perfil do usuário

5 Re: Função toggle - Pure CSS em Seg Set 15, 2014 9:29 pm

DeeW.

avatar
Membro elite

CSS deixa tudo mais leve! Wink
Ótimo código emo. :-)

Ver perfil do usuário

6 Re: Função toggle - Pure CSS em Qua Set 17, 2014 5:36 pm

ddr3

avatar
Membro ativo

gracias!!!!!!!!!!!!!!!!!!!!!

Ver perfil do usuário

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum