PESQUISA PERSONALIZADA

HTML e CSS Pro -  O melhor Portal para se aprender HTML e CSS na prática.

Home CSS Abas com CSS3 animadas

Abas com CSS3 animadas

CSS Luiz Augusto Vieira  

Abas com CSS3 animadas
  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter

1° Passo:

/*reset*/
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
 
body {
  background: #eee;
  font-family: Arial;
}

O código acima é apenas para resetar o nosso HTML, nada fora do normal.

2° Passo:

/*envolve todo o nosso conteúdo*/
.tab {
  width: 700px;
  margin: 50px auto;
}

Criamos a nossa classe ( .tab ) que vai envolver nosso conteúdo e setamos suas propriedades com seus valores.

3° Passo:

/*esconde o radio button*/
.tab input[type] {
  display: none;
}

No código acima, escondemos o radio button ( .tab input[type] ), pois não queremos que os mesmos fiquem visível na tela.

4° Passo:

/*nossos próprios botões*/
.tab label {
  display: block;
  float: left;
  padding: 12px 20px;
  margin-right: 5px;
  cursor: pointer;
  transition: background-color .3s;
}

Acima está nossos próprios botões que substituem o radio button para o clique.

Não há nada de anormal, são códigos que usamos no dia a dia, com uma observação no ( transition: background-color .3s; ), servirá para dar um efeito fade ao passar o mouse sobre os botões quando invocarmos o Pseudo Classes ( :hover ).

5° Passo:

/*ataca o label com hover e o radio button checkado*/
.tab label:hover,
.tab input:checked + label {
  background: #5b9780;
  color: #fff;
}

No código acima, vamos atacar o Pseudo Classes ( :hover ) mudando as cores do ( Label ) conforme definimos.

6° Passo:

/*o conteúdo que mudar ao clicar nos boões*/
.tabs {
  clear: both;
  perspective: 400px;
  -webkit-perspective: 400px;
}

Criamos nossa classe que vai envolver o conteúdo da abas. Não definimos largura e nem altura, apenas definimos as propriedades ( clear ) e a ( perspective ) e setamos o valor com 400px.

7° Passo:

/*aqui a nossa content*/
.tabs .content {
  background: #fff;
  width: 700px;
  position: absolute;
  border: 2px solid #5b9780;
  padding: 10px 30px 40px;
  line-height: 1.4em;
  opacity: 0;
  transform: rotateX(-20deg);
  transform-origin: top center;
  transition: opacity .3s, transform 1s;
  z-index: 0;
}

Dentro da classe ( .tabs ) criamos a classe ( .content ) que envolve o conteúdo, ela que vai fazer a nossa animação ao clicar nos botões.

8° Passo:

/*aqui estão nosso links*/
#tab1:checked ~ .tabs .content:nth-of-type(1),
#tab2:checked ~ .tabs .content:nth-of-type(2),
#tab3:checked ~ .tabs .content:nth-of-type(3),
#tab4:checked ~ .tabs .content:nth-of-type(4) {
  transform: rotateX(0);
  opacity: 1;
  z-index: 1;
}

No código acima é onde acontece a mágica ao clicar nos botões.

Ao clicar no botão atingimos a classe ( .tabs ) e a classe ( .content ) dentro dela e mostramos o conteúdo certo de acordo com Pseudo Classes ( :nth-of-type() ).

9° Passo:

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Abas com CSS3 animada</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
 
  <body>
    <div class="tab">
      <input type="radio" name="tabs" id="tab1" checked>
      <label for="tab1">Home</label>
 
      <input type="radio" name="tabs" id="tab2">
      <label for="tab2">Sobre</label>
 
      <input type="radio" name="tabs" id="tab3">
      <label for="tab3">Notícias</label>
 
      <input type="radio" name="tabs" id="tab4">
      <label for="tab4">Contato</label>
 
      <div class="tabs">
        <div class="content">
          <h2>HOME</h2>
          <p>Lorem ipsum dolor sit amet...</p>
        </div>
         
        <div class="content">
          <h2>SOBRE</h2>
          <p>Maecenas dictum, urna ut consequat condimentum...</p>
        </div>
         
        <div class="content">
          <h2>NOTÍCIAS</h2>
          <p>Duis luctus dolor ac erat luctus hendrerit...</p>
        </div>
         
        <div class="content">
          <h2>CONTATO</h2>
          <p>Fusce vel eros eu lectus ultricies...</p>
        </div>
      </div>
    </div>
  </body>
</html>

Acima está nosso HTML para o exemplo das abas.

Veja o resultado final:

  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter

ATÉ O PRÓXIMO POST

Sentiu falta de alguma coisa óbvia? Comente, dei sua opinião, ajude a divulgar o Blog.

Inscreva-se no Youtube: https://www.youtube.com/htmlecsspro

Curta nossa Fanpage: https://www.facebook.com/htmlecsspro

Entre para o nosso Grupo: https://www.facebook.com/groups/htmlecsspro

Olá, deixe seu comentário para Abas com CSS3 animadas

Já temos 1 comentário(s). DEIXE O SEU :)
Uoxitu Siuva

Uoxitu Siuva

Excelente Smithers!
★★★★★DIA 07.11.18 11h12RESPONDER
Luiz Augusto Vieira
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/