Criando sistema de abas com CSS3

Uma das formas de você consegue aprender, é tentando fazer algo. Muitas vezes ficamos presos a teoria, sem tentar fazer a prática, e com isso dificulta visualizar como as coisas funcionam.

Nesse tutorial vamos ver alguns seletores do CSS 3. Serão basicamente esses:

[atributo ^=valor] => Com esse você informa que deseja selecionar qualquer atributo que comece com determinado valor

Elemento1  ~  Elemento2 => Com esse, informo que quero selecionar qualquer Elemento2 , que esteja precedido do Elemento1

Elemento1 + Elemento2 => Esse aqui é o CSS 2.1, estou selecionando qualquer Elemento2, que seja seguido do Elemento1

: checked => Selecionar o elemento de formulário, que esteja marcado.

Vamos fazer um exemplo, o qual possamos utilizar eles. Criaremos um item de Abas.

Primeira coisa, vamos definir nosso HTML:

[html]
<div class="tab-main">
<div class="tabs">
<input type="radio" checked="checked" name="tabs" id="tab1" />
<label for="tab1">Aba 1</label>
<div class="tab-content">

Exemplo do Conteúdo 1

</div>
</div>
<div class="tabs">
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">Aba 2</label>
<div class="tab-content">

Exemplo do Conteúdo 2

</div>
</div>
<div class="tabs">
<input type="radio" name="tabs" id="tab3" />
<label for="tab3">Aba 3</label>
<div class="tab-content">

Exemplo do Conteúdo 3

</div>
</div>
</div>
[/html]

Vamos ver que temos no HTML

• Tem um elemento que vai englobar os itens das abas (.tab-main);
• Dentro do .tab-main tem os elementos, que seria cada item da aba (.tabs).
• Nesses itens (.abas), vamos ter um campo input, do tipo radio, e um label, associado pelo ID atribuído ao input ;
• E depois tem um elemento tab-content, que responsável pelo conteúdo.

A lógica que vamos fazer no CSS é verificar qual elemento do  input está selecionado, e mostrar o .tab-content que é precedido por ele.

Vamos ao CSS. Ele está todo comentado:

[css]
/*Vamos ocultar o Input*/
.tabs input{
opacity:0;
}

/**
* Vamos definir o container que vai englobar tudo
* Nele vamos adicionar o position:relative, pra
* definir o espaço que os elementos internos vão ter que seguir
* já que um irá utilizar o position:absolute;
**/
.tab-main{
position:relative;
width: 650px;
padding: 0;
margin: 0 auto;
}
/**
* Definimos float:left nas abas
*/
.tabs{
float:left;
}

/**
* Vamos configurar o label, que será
* a nossa aba.
* Definimos também um position:relative
* porque vamos definir z-index, pra sobrepor,
* para compor o efeito.
*/
.tabs label {
display: block;
padding: 5px 20px;
font-weight: normal;
cursor: pointer;
position: relative;
top: 0;
border:1px solid #ccc;
z-index:1;
margin-right:1px;
}

/**
* Aqui define o elemento que engloba o texto.
* Por padrão vamos ocultar esse elemento
* E vamos definir position absolute.
* Definimos um afastamento do topo, e z-index:0
* para o Label ficar sobreposto a ele
*
**/
.tab-content{
display:none;
text-align: left;
width: 100%;
font-size: 20px;
line-height: 140%;
padding-top: 10px;
border: 1px solid #ccc;
padding: 0 15px;
color: #333;
position: absolute;
top: 49px;
left: 0;
z-index:0;

}

/**
* Agora vamos usar o seletores.
* Selecionar o elemento Label que segue o elemento com atributo id que comece o tab,
* desde que ele seja marcado (:checked).
* Que no caso é o input. Aqui colocar uma borda branca no bottom
*/

[id^=tab]:checked + label {
border-bottom:1px solid #fff;

}
/**
* Faremos a mesma coisa do anterior, só que vamos usar o ~
* para informar que selecione o elemento .tab-content
* que está sendo precedido pelo atributo id com o valor
* começado o tab, e selecionado (checked)
*/

[id^=tab]:checked ~ .tab-content {
display: block;
}
[/css]

Vamos ver como ficou as nossas abas: Exemplo

No arquivo de exemplo, apenas adicionei o normalize.css.

Existem outras formas de criar abas só com CSS, como por exemplo também usando :target. Criarei outro tutorial mostrando usando a pseudo classe :target.

Espero que tenham gostado, e até a próxima.