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:

<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>

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:
  /*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;
            }

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.