CSS Star Rating

Postado por: Pedro Rogrio em 16 de abril de 2009

Procurando na internet voc pode encontrar vrios scripts de rating, alguns muito complexos utilizando marcao as vezes desnecessria e outros muitos complicados de customizar. Nesse tutorial, desenvolvido por Henry Hoffman, voc aprender de uma forma muito simples a desenvolver um sistema de rating utilizando HTML e CSS, utilizando uma nica imagem em 3 estados: static, hover e active.

Como?
O segredo consiste em utilizar margens negativas. Primeiramente vamos fazer o download da imagem que ser utilizada no tutorial e depois vamos preparar o nosso HTML, onde sero utilizados listas desordenadas:
view sourceprint? 1.<ul class="rating"> 2.<li><a href="#" title="1 3.<li><a href="#" title="2 4.<li><a href="#" title="3 5.<li><a href="#" title="4 6.<li><a href="#" title="5 7.</ul>

Star">1</a></li> Stars">2</a></li> Stars">3</a></li> Stars">4</a></li> Stars">5</a></li>

Agora, vamos efetuar a customizao atravs do CSS. Primeiramente precisamos remover os estilos que toda tag HTML possui por padro, vamos zerar as margens, o padding, etc:
view sourceprint? 1.* { 2.padding:0; 3.margin:0; 4.list-style:none; 5.}

Vamos agora definir os estilos para a nossa lista, importante ficar claro que a altura da lista deve ser igual a de 1 estrela e a largura total deve ser a soma das 5 estrelas. Adicionamos tambm overflow:hidden para browsers antigos:
view sourceprint?

1.ul.rating{ 2.background:url(images/star.jpg) bottom; 3.height:21px; 4.width:115px; 5.overflow:hidden; 6.}

Aqui ser onde devemos definir que os itens de nossa lista fiquem um ao lado do outro:
view sourceprint? 1.ul.rating li{ 2.display:inline 3.}

Vamos definir tambm a largura e altura para item da lista, que deve ser igual ao tamanho de 1 estrela, e removemos o texto da pgina com o uso de text-indent. Tambm se aplica position:relative para que sempre uma estrela se destaque mais que a outra, ou seja, fique sempre na frente.
view sourceprint? 1..rating a { 2.display:block; 3.width:23px; 4.height:21px; 5.float:left; 6.text-indent:-9999px; 7.position:relative; 8.}

Precisamos agora definir o estado :hover e :active de nosso rating trocando as posies do background:
view sourceprint? 01..rating a:hover { 02.background:url(images/star.jpg) center; 03.width:115px; 04.margin-left:-92px; 05.position:static; 06.} 07. 08..rating a:active { 09.background-position:top; 10.}

Est pronto nosso sistema de rating, vejam esse exemplo, funciona perfeitamente no IE6, IE7, IE8, Firefox, Safari, Google Chrome.