[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

Introdução a Banco de Dados

Olá pessoal!

Estou aqui desta vez para postar um material (slides) falando sobre banco de dados. Trata-se de uma introdução aos conceitos gerais em BD, metadados, os tipos de bancos, relacionamentos e etc.

Fiquem a vontade para usar, compartilhar e indicar este material a quem precisar e para a ocasião que tiverem. Agradeço desde já pelos comentários e compartilhamentos. Qualquer dúvida pode perguntar pelos comentários ou nas redes sociais que responderei assim que for possível.

MySQL Workbench: Criando um novo Schema

Olá pessoal! Irei postar um primeiro TUTORIAL relacionado à banco de dados.

Para este primeiro passo, irei demonstrar os passos para criação de Conexões e Schema no banco de dados MySQL, através do Workbench.

Para poder utilizar você precisará ter o banco de dados MySQL e a aplicação MySQL Workbench instaladas. Você pode baixar GRATUITAMENTE no site oficial do SGBD da Oracle. Os passos foram feitos e utilizados pelos alunos da minha primeira turma de Administração de Banco de dados. Espero que aproveitem. Vamos lá!

Continue Lendo “MySQL Workbench: Criando um novo Schema”