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):
<!-- destaques --> <div id="blocoDestaques"> <ul> <li>...</li> <li>...</li> <li>...</li> </ul> </div> <!-- /destaques -->
Agora, dentro de cada item, vamos adicionar uma imagem (IMG) com um link (A):
<li> <a href="#" title="Destaque 1"> <img src="img/destaque1.jpg" alt="Destaque 1" /> </a> </li> <li> <a href="#" title="Destaque 2"> <img src="img/destaque2.jpg" alt="Destaque 2" /> </a> </li> <li> <a href="#" title="Destaque 3"> <img src="img/destaque3.jpg" alt="Destaque 3" /> </a> </li>
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:
<li> <a href="#" title="Destaque 1"> <img src="img/destaque1.jpg" alt="Destaque 1" /> </a> <div class="fundo"><!-- --></div> <p><a href="#" title="Destaque 1">Destaque 1 - Muita coisa boa!</a></p> </li> <li> <a href="#" title="Destaque 2"> <img src="img/destaque2.jpg" alt="Destaque 2" /> </a> <div class="fundo"><!-- --></div> <p><a href="#" title="Destaque 2">Destaque 2 - Nem tão bom assim...</a></p> </li> <li> <a href="#" title="Destaque 3"> <img src="img/destaque3.jpg" alt="Destaque 3" /> </a> <div class="fundo"><!-- --></div> <p><a href="#" title="Destaque 3">Destaque 3 - Agora sim... bem melhor!</a></p> </li>
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:
<!-- destaques --> <div id="blocoDestaques"> <a class="faixa" href="#" title=""><!-- --></a> <ul> <li> <a href="#" title="Destaque 1"> <img src="img/destaque1.jpg" alt="Destaque 1" /> </a> <div class="fundo"><!-- --></div> <p><a href="#" title="Destaque 1">Destaque 1 - Muita coisa boa!</a></p> </li> <li> <a href="#" title="Destaque 2"> <img src="img/destaque2.jpg" alt="Destaque 2" /> </a> <div class="fundo"><!-- --></div> <p><a href="#" title="Destaque 2">Destaque 2 - Nem tão bom assim...</a></p> </li> <li> <a href="#" title="Destaque 3"> <img src="img/destaque3.jpg" alt="Destaque 3" /> </a> <div class="fundo"><!-- --></div> <p><a href="#" title="Destaque 3">Destaque 3 - Agora sim... bem melhor!</a></p> </li> </ul> </div> <!-- /destaques -->
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:
#blocoDestaques ul,
#blocoDestaques ul li {
list-style: none;
}
#blocoDestaques,
#blocoDestaques ul,
#blocoDestaques ul li,
#blocoDestaques ul li img {
margin: 0px;
padding: 0px;
}
Agora nós definiremos a altura e largura de todos os elementos usados no destaque:
#blocoDestaques ul,
#blocoDestaques ul li {
list-style: none;
}
#blocoDestaques,
#blocoDestaques ul,
#blocoDestaques ul li,
#blocoDestaques ul li img {
margin: 0px;
padding: 0px;
width: 600px;
height: 215px;
}
#blocoDestaques ul li div.fundo {
width: 600px;
height: 40px;
}
#blocoDestaques a.faixa {
width: 100px;
height: 100px;
}
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:
#blocoDestaques {
position: relative;
}
#blocoDestaques ul,
#blocoDestaques ul li {
list-style: none;
}
#blocoDestaques,
#blocoDestaques ul,
#blocoDestaques ul li,
#blocoDestaques ul li img {
margin: 0px;
padding: 0px;
width: 600px;
height: 215px;
}
#blocoDestaques ul li {
position: relative;
}
#blocoDestaques ul li div.fundo {
width: 600px;
height: 40px;
position: absolute;
bottom: 0px;
left: 0px;
background: black;
}
#blocoDestaques ul li p {
margin: 0px;
padding: 10px 15px;
position: absolute;
bottom: 0px;
left: 0px;
line-height: 20px;
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
}
#blocoDestaques ul li p a {
color: white;
text-decoration: none;
}
#blocoDestaques a.faixa {
width: 100px;
height: 100px;
position: absolute;
top: -5px;
left: -5px;
z-index: 100;
background: transparent url('../img/faixa.png') 0 0 no-repeat;
}
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 online ou faça download do RAR com os arquivos.
Espero que tenham gostado! 
Você também vai gostar de ler:
- Criando um sistema de destaques – Parte 2
- Criando um sistema de destaques – Parte 3
- Criando um sistema de logins com classe no PHP – Parte 1
- Criando um sistema de logins com classe no PHP – Parte 4
- Criando um sistema de logins com classe no PHP – Parte 2
Postado em Artigos, CSS, HTML, MySQL, PHP, Tutoriais
Com as tags Código, CSS, Destaques, Download, E-mail, Funções, HTML, jQuery, jQuery Cycle, MySQL, PHP, PNG, Sistema, Sistemas, Thiago Belem / Blog, Tutorial, URL, WordPress, XHTML
Escrito por Thiago Belem
Gostou desse artigo?
Não se esqueça de assinar o RSS e divulgue-o para o mundo:
