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

Gostou desse artigo?

Não se esqueça de assinar o RSS e divulgue-o para o mundo: