Avaliações com estrelas em CSS e UTF8

Ah, a onipresente classificação por estrelas. Um único conceito simples com centenas de implementações diferentes.

Vamos fazer um usando apenas caracteres UTF8, CSS e um único elemento HTML por estrela.

Aqui está o que faremos: http://jsfiddle.net/M8UAy/

Primeiro, a marcação:

<span class="star-icon">☆</span>
<span class="star-icon">☆</span>
<span class="star-icon">☆</span>
<span class="star-icon">☆</span>
<span class="star-icon">☆</span>

Mantenha simples. Isso nos dá cinco estrelas vazias, mas este protótipo vale mais do que isso!

Vamos adicionar algumas classes para preencher uma classificação sólida de 3,5 estrelas. Satisfatório!

<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon half">☆</span>
<span class="star-icon">☆</span>

Legal. Agora só precisamos de um pouco de CSS. Primeiro, as estrelas cinzentas e vazias da consternação:

.star-icon {
    color: #ddd;
    font-size: 34px;
    position: relative;
}

Então – as estrelas brilhantes do triunfo!

.star-icon.full:before {
    color: #FDE16D;
    content: '2605'; /* Full star in UTF8 */
    position: absolute;
    left: 0;
    text-shadow: 0 0 2px rgba(0,0,0,0.7);
 }

E, finalmente, as medíocres meias-estrelas da indecisão:

.star-icon.half:before {
    color: #FDE16D;
    content: '2605'; /* Full star in UTF8 */
    position: absolute;
    left: 0;
    width: 50%;
    overflow: hidden;
    text-shadow: 0 0 2px rgba(0,0,0,0.7);
}

Verifique o JSFiddle novamente se quiser ver o resultado.

Então, qual é o truque aqui? Estamos usando a estrela vazia como espaço reservado e, em seguida, preenchendo-a com a ajuda do seletor CSS emparelhado com a propriedade. Isso nos permite colocar em camadas outra estrela amarela completa no topo.:beforecontent

O seletor cria um pseudoelemento cujo conteúdo é o UTF8 ★ . Este pseudo-elemento é então posicionado absolutamente de forma que cubra a estrela vazia original.:before

Para a meia estrela, o truque é quase o mesmo, mas definimos e de forma que apenas metade da estrela completa apareça, enquanto o resto é cortado.width: 50%;overflow: hidden;

Você deve ter notado um hack sujo do Firefox naquele JSFiddle. Infelizmente, o Firefox renderiza as estrelas em um tamanho muito menor, então, para compensar, configurei o maior apenas para FF. Se você sabe o que está causando isso (ou uma solução melhor!), Deixe-me um comentário!font-size

Além disso, é possível tornar a classificação interativa no foco puramente por meio de CSS. Talvez algo para o meu próximo protótipo;)

★★★ 再见! ★★★