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á!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Jose Correia
    7 de novembro de 2011

    Ola mas depois como é que eu coloco o icon so rss feed, eu uso o feed bruner?



    • 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.



  2. 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



  3. 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



    • 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


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz