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.
Salve amigo, parabéns pelo post, muito bem feito.
Testei e deu certo em 100% aqui, já estou utilizando em meus projetos.
Forte abraço, sucesso.
Vlw Jorge
Boa noite. Implementei este script no meu site, mas a div do conteudo da tab não está fazendo com que a div do conteudo geral do site se expanda para conte-la. Alguem sabe resolver?
Vejam: http://www.talugo.com/exemplo.jpg
Muito bom tutorial, geralmente a solução mais comum é fazer o uso de plugins ou jQuery, mas você conseguiu apontar um método que somente utiliza HTML e CSS, e é perfeitamente customizável.
Boa noite amigo!
Em primeiro lugar, quero de te parabenizar por mais um tutorial… Super 10.
Aproveitando a oportunidade, gostaria de tirar um dúvida. Imaginando um sistema com essas abas, estilizadas tipo o MS Office, onde haverá icones como botões dentro de cada aba, há possibilidade de quando o usuário selecione um icone mude somente a parte de baixo? Tipo, clicar e traser a página sem que o menu volte para o principal? Deu pra entender a pergunta?
Watson, acho q vc chamar uma página via ajax, ao clicar na aba. Nesse caso, é interessante usa o javascript, pra fazer requisição assincrona, vc pode utilizar o jQuery pra facilitar esse trabalho.
Estou utilizando seu sistema de abas e gostando muito.
Mas estou tendo um problema.
Utilizo ele num widget de texto do wordpress só que ele fica abaixo dos demais conteúdo sobrepondo-se.
Veja: http://www.portaltrainee.com.br/novo.
Sabe como posso resolver?