Normalmente os ícones RSS ou das redes sociais são feitos num programa de manipulação de imagens, como o Photoshop ou Fireworks, mas também é possível fazê-lo utilizando outra técnica, através de CSS3. Desta forma você irá optimizar um pouco a velocidade de carregamento da sua página bem como poupar tráfego. É certo que um ícone RSS é uma pequena gota no oceano do tráfego, mas em websites com muito tráfego como a Escola Dinheiro em que tem mais de 2,500.000 páginas vistas, pode fazer uma grande diferença. Fazendo alguns cálculos rápidos, se uma imagem de um ícone RSS tiver 5,33 Kb ( como é o caso do ícone utilizado na rede das Escolas+ ) e for visto 2,500.000 vezes, dá um total de 13,325.000 Kb, que é qualquer coisa como mais de 13 Gb de tráfego. Neste pequeno tutorial iremo-lhe mostrar Como criar o seu próprio ícone RSS Feed com CSS3!

Não perca alguns artigos relacionados com CSS:

css3

1. CRIAR DOCUMENTO HTML

Para efeitos de teste e produção deste artigo, iremos criar um novo documento HTML para iniciarmos o processo. Se não sabe como criar um novo documento HTML e procura um editor de código consulte o nosso Guia Dreamweaver onde poderá aprender como dominar a ferramenta da Adobe e criar os seus documentos HTML sem dificuldade. Crie um novo documento HTML e insira o seguinte código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ícone RSS Feed em CSS3</title> 

<link rel="stylesheet" href="style.css">

</head>

<body>

<span class='feed-box'>

</span>

</body>
</html>

Traduzindo o código acima, primeiro fazemos a ligação à folha de estilos CSS (Não é necessário criar o ficheiro antes de fazer a ligação) com “<link rel=”stylesheet” href=”style.css”>”. Depois, dentro da tag body fazemos a chamada da nossa caixa que vai ser a base do icone RSS, com “<span class=’feed-box’></span>”.

2. CRIAR DOCUMENTO CSS

Tal como referenciámos no ponto acima, iremos introduzir as indicações de estilização numa folha de estilos CSS á parte. Crie um novo documento CSS com o nome “style.css” e insira o seguinte código no mesmo:

span.feed-box{
	display:block;
	width:45px;
	height:45px;
	margin:0 auto;
	background:#F9A004;
	box-shadow:
		1px 1px 0 #C27C03,
		2px 2px 0 #C27C03,
		3px 3px 0 #C27C03;
	-moz-box-shadow:
		1px 1px 0 #C27C03,
		2px 2px 0 #C27C03,
		3px 3px 0 #C27C03;
	-webkit-box-shadow:
		1px 1px 0 #C27C03,
		2px 2px 0 #C27C03,
		3px 3px 0 #C27C03;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px
	}
span.feed-box *{
	float:right;
	display:block
	}

Este é o código necessário para modelar a caixa que é a base do ícone do Feed RSS. Estamos a criar um ícone com 45x45px com um ligeiro sombreado para dar o aspecto 3D. Neste momento, fazendo uma pré-visualização, temos o seguinte:

Uma caixa com um ligeiro sombreado. Agora falta fazer os detalhes que irão fazer com que esta caixa se pareça realmente com um ícone de um feed RSS.

3. TRABALHANDO OS DETALHES – PASSO 1

Este é o primeiro passo para começar a trabalhar os detalhes que vão tornar uma simples caixa com sombreado no seu ícone RSS. O primeiro detalhe que vamos trabalhar é a caixa que faz um subtil rebordo dentro da caixa que criámos anteriormente. Para isso, insira dentro das tags <body>e dentro das tags <span class=’feed-box’></span>o seguinte trecho de código:

<span class='feed-box-in'>

</span>

Ficará assim:

<body>
<span class='feed-box'>
	<span class='feed-box-in'>

	</span>
</span>
</body>

De seguida é necessário introduzir o CSS que irá criar o rebordo. Para isso, insira no seu ficheiro style.css o seguinte trecho de código, a seguir ao código existente:

span.feed-box .feed-box-in{
	border:1px solid #FFC563;
	width:41px;
	height:41px;
	margin:1px 1px 0 0;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	overflow:hidden
}

Neste momento, o resultado é o seguinte:

4. TRABALHANDO OS DETALHES – PASSO 2

Neste passo iremos criar os traços com forma curva que simbolizam o RSS.

Primeiro vamos criar o traço exterior – Insira o seguinte trecho de código no seu ficheiro HTML, dentro das tags existentes:

 <span class='feed-quarter-circle-big'>
 </span>

Ficará assim:

<body>
<span class='feed-box'>
	<span class='feed-box-in'>
		<span class='feed-quarter-circle-big'>
		</span>
	</span>
</span>
</body>

Agora insira o CSS no seu ficheiro style.css , a seguir ao código existente:

span.feed-box .feed-box-in .feed-quarter-circle-big{
	margin:2px 2px 0 0;
	width:65px;
	height:65px;
	border:6.5px solid #FFDEA5;
	border-radius:50%
}

Este será o aspecto:

De seguida iremos criar o traço interior – Insira o seguinte trecho de código no seu ficheiro HTML dentro das tags existentes:

<span class='feed-quarter-circle-small'>
</span>

Ficará assim:

<body>
<span class='feed-box'>
	<span class='feed-box-in'>
		<span class='feed-quarter-circle-big'>
			<span class='feed-quarter-circle-small'>
            </span>
		</span>
	</span>
</span>
</body>

Agora insira o CSS no ficheiro style.css, mais uma vez a seguir ao código existente:

span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small{
	margin:4.5px 4.5px 0 0;
	width:44px;
	height:44px;
	border:6px solid #FFDEA5;
	border-radius:50%
}

E este será o seu aspecto:

Neste momento só falta apenas o último detalhe: o pequeno círculo no interior dos traços já criados. Para criar o círculo, insira o seguinte código no seu HTML, dentro das tags já existentes:

<span class='feed-circle'>
</span>

Ficará assim:

<body>
<span class='feed-box'>
	<span class='feed-box-in'>
		<span class='feed-quarter-circle-big'>
			<span class='feed-quarter-circle-small'>
            	<span class='feed-circle'>

            	</span>
            </span>
		</span>
	</span>
</span>
</body>

De seguida insira o seguinte código CSS dentro do seu ficheiro style.css:

span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle{
	margin:9px 9px 0 0;
	background:#FFDEA5;
	width:12px;
	height:12px;
	border-radius:50%
}

E este será o seu aspecto final!

E já está, tem o seu próprio ícone RSS Feed criado! Agora poderá inseri-lo em qualquer parte do seu website e linká-lo para o seu feed.

5. FICHEIROS FONTE

Se pretender os ficheiros fonte deste tutorial pode baixá-los aqui.

Abraço e até já!

Comentários dos Alunos

Jose Correia
7 de Novembro de 2011

Ola mas depois como é que eu coloco o icon so rss feed, eu uso o feed bruner?
Responder
- Diogo Espinha
  7 de Novembro de 2011
  
  Olá José, para inserires o ícone numa página basta seguires os passos do tutorial. Para meteres o link no ícone RSS, insere o seguinte código:
  < .a href="link do feeburner">
  Aqui no meio fica o HTML do ícone RSS.
  < ./a>
  
  Tira o ponto “.” que está a seguir aos <
  
  Abraço.
  Responder
Jose
7 de Novembro de 2011

Sim claro. Nao estava a perceber, pensava que era o icon da pagina do rss feed, que aparecia la em cima na pagina do feed. Mas já percebi. obrigado
Responder
Jose Correia
8 de Novembro de 2011

Olá.Quando abro meu blog em outros browsers e mesmo no firefox desformata algumas coisas no blog como a caixa de pesquisa que fica mais pequena, os menus no IE mudam de cor e de dimensao e nao mostra cabeçalho. Porque será. Isto aconteceu desde que eu coloquei uma função no ficheiro function.php para aparecer o botão ler mais no excerto de artigos. Se me puder ajudar agradeço imenso e posso postar aqui o código que coloquei no fucntion.php
Responder
- Diogo Espinha
  9 de Novembro de 2011
  
  Olé José, o local ideal para colocar essa e outras questões relativamente a WordPress é na Escola WordPress
  
  Abraço
  Responder