Fala gente!
Tenho recebido vários e-mails pedindo um tutorial ensinando a criar um sistema de destaques como esse que fiz na home do blog.
O sistema de destaques que iremos criar não é específico para o WordPress e sim para qualquer site… Por isso não iremos criar um plugin de WordPress ou usar as funções do mesmo, faremos tudo com código puro.
O sistema de destaques que iremos criar terá a seguinte aparência:
A marcação XHTML
Antes de mais nada, precisamos criar o HTML do nosso bloco de destaque… Começamos com uma div e dentro dela criaremos uma lista (UL) com três itens (LI):
Agora, dentro de cada item, vamos adicionar uma imagem (IMG) com um link (A):
Agora vamos inserir, após as imagens com links, parágrafos (P) contendo a descrição (ou titulo) do destaque e que também estão com link (A) para o destaque:
Algumas pessoas podem ter pensado que errei ao criar dois links ao invés de inserir o parágrafo (P) dentro do primeiro link, após a imagem… Mas isso seria errado pois o link é um elemento de linha (in-line) e o parágrafo é um elemento de bloco (block) e nunca devemos inserir um elemento block dentro de um in-line.
Criamos também, antes de cada parágrafo, uma div.fundo vazia que será o fundo preto transparente da descrição/titulo de cada item.
Até agora nosso sistema de destaques ficou assim:
Por fim, nós vamos inserir mais um link, dessa vez vazio, antes da lista (UL)… Esse link será a faixa [Destaques] que teremos sobre a imagem e a nossa marcação HTML está pronta:
Melhorando a aparência (CSS)
Começaremos criando um arquivo CSS e nele definiremos que a lista (UL), os seus itens (LI) e as imagens não terão estilo, margem ou espaçamento:
Agora nós definiremos a altura e largura de todos os elementos usados no destaque:
Agora nós definimos o posicionamento de todos os elementos, o estilo dos elementos que compoem a descrição de cada item e o fundo da faixa [Desaques] que ficará sobre as imagens:
Por enquanto vamos ficar por aqui… O HTML e o CSS do sistema de destaques está pronto… Na Parte 2 falaremos sobre o efeito em jQuery que fará a transição dos slides e colocaremos o paginador.
Quer ver como ficou o sistema de destaques até agora? Veja RAR com os arquivos.
Espero que tenham gostado! :)