CSS no Lanche

Procurando na internet você pode encontrar vários scripts de rating, alguns muito complexos utilizando marcação as vezes desnecessária 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 serão utilizados listas desordenadas:

<ul class="rating">
    <li><a href="#" title="1 Star">1</a></li>
    <li><a href="#" title="2 Stars">2</a></li>
    <li><a href="#" title="3 Stars">3</a></li>
    <li><a href="#" title="4 Stars">4</a></li>
    <li><a href="#" title="5 Stars">5</a></li>
</ul>

Agora, vamos efetuar a customização através do CSS. Primeiramente precisamos remover os estilos que toda tag HTML possui por padrão, vamos zerar as margens, o padding, etc:

* {
    padding:0;
    margin:0;
    list-style:none;
}

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 também overflow:hidden para browsers antigos:

ul.rating{
    background:url(images/star.jpg) bottom;
    height:21px;
    width:115px;
    overflow:hidden;
}

Aqui será onde devemos definir que os itens de nossa lista fiquem um ao lado do outro:

ul.rating li{
	display:inline
}

Vamos definir também a largura e altura para item da lista, que deve ser igual ao tamanho de 1 estrela, e removemos o texto da página com o uso de text-indent. Também se aplica position:relative para que sempre uma estrela se destaque mais que a outra, ou seja, fique sempre na frente.

.rating a {
    display:block;
    width:23px;
    height:21px;
    float:left;
    text-indent:-9999px;
    position:relative;
}

Precisamos agora definir o estado :hover e :active de nosso rating trocando as posições do background:

.rating a:hover {
    background:url(images/star.jpg) center;
    width:115px;
    margin-left:-92px;
    position:static;
}

.rating a:active {
	background-position:top;
}

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