[CSS+HTML] Criando abas de forma simples

Olá Pessoal. Hoje vou apresentar um pequeno tutorial de criação de abas utilizando apenas HTML e CSS. O objetivo é trazer um exemplo simples que pode ser usado em projetos já existentes. Para este exemplo, nós vamos ter uma simples estrutura de abas em HTML e usando a propriedade de listas com a tag <ul> e 3 <li>.

1. Criando a estrutura HTML.

Primeiramente, temos o seguinte código HTML:

<!-- Criando a listagem -->
<ul class="abas">
    <!-- Aqui, criação da primeira aba -->
	<li class="aba" id="aba-1">
     <a href="#aba-1">Aba1</a>
<section class="conteudo"> Conteúdo da Aba 1 </section></li>
<!-- Aqui, criação da segunda aba -->
	<li class="aba" id="aba-2">
     <a href="#aba-2">Aba 2</a> 
<section class="conteudo"> Conteúdo da Aba 2 </section></li>
<!-- Aqui, criação da terceira aba -->
	<li class="aba" id="aba-3">
     <a href="#aba-3">Aba 3</a> 
<section class="conteudo"> Conteúdo da Aba 3 </section></li>
</ul>

No bloco de código anterior, criamos uma lista com a tag <ul> com 3 opções, intituladas “Aba 1”, “Aba 2” e “Aba 3”. Repare que definimos classas para a <ul>. Para os itens da lista <li> além de classes, definimos um ID para cada um, que servirá para linkar as abas. Para os links, utilizando a técnica de âncoras (#nome-da-aba) sendo o mesmo ID de cada item da lista de abas.

2. Definindo o Estilo CSS

Após a criação da estrutura em HTML, precisamos definis as classes através do CSS. Criaremos portanto as seguintes classes:

.abas {
position: relative;
}
.aba {
display: inline;
}
.aba &amp;amp;amp;gt; a {
float: left;
padding: 0.5em 1em;
background: linear-gradient(#FFF, #EEE);
border-width: 1px;
border-style: solid;
border-color: #CCC #CCC #FFF;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
.aba:not(:target) a {
border-bottom: 0 none;

}
.aba:target a, a:hover {
background: white;
}
.conteudo {
position: absolute;
left: 0;
top: calc(2em + 4px); /* altura do link + bordas */
z-index: -2;
border: 1px solid #CCC;
background-color: white;
}
.aba:target .conteudo {
z-index: -1;
}

Repare que definimos apenas classes. Os IDs que usamos no código HTML serviram apenas para utilizarmos as âncoras para serem o link de cada aba. Pronto, de forma simples temos o resultado final. A título de exemplo, criei uma pagina simples em HTML incorporando o CSS dentro da mesma. Vale lembrar que é aconselhável criar um arquivo CSS à parte em seu projeto, e adicionar o trecho de código HTML onde você precisar dentro da sua página web.

O código completo ficaria assim:

<!DOCTYPE html>
<html>
<head>
  <title>
    Criando Abas
  </title>
  <meta charset="UTF-8" />
<style type="text/css">
    .abas {
    position: relative;
    }
    .aba {
    display: inline;
    }
    .aba > a {
    float: left;
    padding: 0.5em 1em;
    background: linear-gradient(#FFF, #EEE);
    border-width: 1px;
    border-style: solid;
    border-color: #CCC #CCC #FFF;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    }
    .aba:not(:target) a {
    border-bottom: 0 none;
    }
    .aba:target a, a:hover {
    background: white;
    }
    .conteudo {
    position: absolute;
    left: 0;
    top: calc(2em + 4px); /* altura do link + bordas */
    z-index: -2;
    border: 1px solid #CCC;
    background-color: white;
    }
    .aba:target .conteudo {
    z-index: -1;
    }
  </style>

</head>
<body>
  <!-- Criando a listagem -->
<ul class="abas">
    <!-- Aqui, criação da primeira aba -->
	<li class="aba" id="aba-1">
     <a href="#aba-1">Aba1</a>
<section class="conteudo"> Conteúdo da Aba 1 </section></li>
<!-- Aqui, criação da segunda aba -->
	<li class="aba" id="aba-2">
     <a href="#aba-2">Aba 2</a> 
<section class="conteudo"> Conteúdo da Aba 2 </section></li>
<!-- Aqui, criação da terceira aba -->
	<li class="aba" id="aba-3">
     <a href="#aba-3">Aba 3</a> 
<section class="conteudo"> Conteúdo da Aba 3 </section></li>
</ul>
</body>
</html>

O código-fonte completo você pode acessar pelo meu Github clicando aqui.

Espero ter ajudado você, até a próxima.

Anúncios

Funções e Fórmulas matemáticas em Excel

Olá.

Hoje a dica é para quem gosta ou precisa realizar fórmulas e utilização de gráficos em alguma planilha eletrônica. Os slides foram montados para apresentação diante de banca do IFPB, portanto serve apenas como parâmetro para acompanhamento visual do conteúdo apresentado em aula.

Caso tenha alguma dúvida sobre o assunto, fique a vontade para perguntar pelos comentários ou em minhas redes sociais.

Programador, teste seus códigos ONLINE!

As vezes não temos instalado na máquina que estamos toda a estrutura necessária para testarmos nossos códigos. Quantas vezes você já passou por isso? Eu, várias. E por ter esse problema, procurei por várias soluções. Na pesquisa descobri várias soluções de sites que permitem você compilar, debugar e testar seu trecho de código ali mesmo, pelo navegador.

As dicas a seguir valem para várias linguagens, dentre elas as mais usadas como PHP, CSS, JS, Python, C e até JAVA. Utilizando essas você pode rapidamente testar e compilar nas mais variadas linguagens de programação existentes e ver o resultado imediatamente.

 

Continue Lendo “Programador, teste seus códigos ONLINE!”

CSS – Trabalhando com Folhas de estilo na web (introdução)

Olá pessoal!

Estou voltando a trazer um conteúdo para quem está iniciando os estudos em criação de sites. Neste tópico, trago um slide com uma introdução ao CSS, as famosas folhas de estilo, item hoje indispensável no desenvolvimento de conteúdo para a web.

Desde já agradeço sua visita e espero que seja proveitoso o conteúdo. Em breve disponibilizaremos mais materiais em slides, PDF e vídeos no Youtube. Fique a vontade para perguntas, críticas e/ou elogios nos comentários ou através do e-mail professordanielbrandao@gmail.com