Avaliação 5 estrelas (Como fazer CSS)

E aí moçada, tudo beleza?
Hoje estou voltando um pouco as origens "NERD" do meu blog...rsrs
Você tá precisando colocar aquele sistema de 5 estrelas pros usuários avaliarem alguma coisa, já tem o código que computa as avaliações, que inserir e animar as estrelas na página com CSS, e não sabe como?
Pois bem, isso aconteceu comigo...
Na verdade eu poderia ter resolvido meu problema usando javascript, porém, é sempre bom lembrar que o javascript deveria ser usado apenas em último caso, já que ele acaba sendo mais pesado de executar...
Comecei tentando fazer apenas com meus conhecimentos e não obtinha sucesso...
Foi então que eu descobri um tal de '~' no CSS, e os problemas começaram a se resolver...
Bom, pra fazer esse sistema de 5 estrelas eu usei 2 imagens...

A cor dessa linha será a cor da estrela "votada"... Ela tem que ter a largura das 5 estrelas somadas. De altura é 1 pixel mesmo, pois usaremos o repear-y...

Você pode fazer essa moldura usando apenas CSS também, mas eu optei por criar uma imagem .png pra haver maior compatibilidade com navegadores. No caso o site que estou desenvolvendo tem um fundo "roxo", por isso a moldura está dessa cor, se o seu tiver fundo branco, você tem que fazer a estrela transparente(sem preenchimento) e em volta pintar de branco...

Pois bem, de imagens usaremos apenas isso, a linha é bem fácil de fazer, a estrela já exige um pouco mais, mas como disse, você pode procurar na internet sobre como fazer em css, talvez pra você seja mais simples, lembrando que o meio da estrela sempre tem que ficar transparente, pois seu preenchimento será feito através do style background...

HTML

O html é bem simples nesse caso, só destaquei uma parte...

É ali que você define qual a avaliação atual... Por exemplo, atualmente o artigo está avaliado em 2 estrelas e meia... Veja que não há essa anotação em lugar nenhum, quer dizer, há, só que manipulando a posição da imagem de fundo(background-position)...

O background-position é definido na ordem left, top...

Portanto neste caso, a imagem de fundo recuará 65px pra esquerda (por isso -65px). Como ela tem 130px de largura, será exibida pela metade, ou seja 2 estrelas e meia...

Você provavelmente está usando um script server-side pra fazer essa avaliação, como o php, portanto, ao inserir esse elemento na página você já faz o cálculo, se você não tiver ideia de como fazer, #ficaadica :

(130 * 0.5) * -1

soma da largura das estrelas = 130
avaliação atual (porcentagem dividido por 100) = 50% = 0.5
multiplicar por -1 no final fará com que o número fique negativo (com o sinal de menos na frente), mas se você quiser também pode inserir juntando string + int...

Em PHP ficaria +/- assim:

<span class="nota" style="background-position:<?php echo (130 * 0.5) * -1 ;?>px 0">

Você também pode fazer isso via javascript, jquery... Enfim...

CSS

<style>

.nota{ // elemento que terá todas as estrelas dentro

display:block; // usar inline-block pra exibir na mesma linha

width:130px; //definindo largura do elemento (soma da largura das 5 estrelas)

height:21px; // definindo altura do elemento, altura de apenas uma estrela

background: #76003A url(imgs/bar.png) repeat-y; // definindo que a estrela apagada tem a cor #76003A e a estrela acesa tem a linha como imagem de fundo repetida na vertical até o fim do elemento

}

.nota:hover{ // quando o mouse estiver sobre o elemento, todas estrelas "acenderão"

background-position:0px 0px !important;

}

.nota i{ // este elemento terá a mesma largura e altura do seu pai(.nota), com uma diferença na imagem de fundo

display: block;

width: 130px;

height: 100%;

background: url(imgs/moldura_estrela.png) repeat-x; // este elemento tem as molduras das estrelas, repetindo-se horizontalmente

}

/* Se parássemos o código nesse ponto, teríamos a avaliação atual e ao passar o mouse sobre qualquer estrela, todas as outras acenderiam... */

.nota a:link{ // este será um "link invisível", que detectara o mouse

display:block;

float:left;

width:20%;

opacity:0; // esta linha que faz o link e seu conteúdo não aparecer, porém ele continua existindo e pode ser clicado...

}

.nota img{ // dentro de cada link invisível há uma imagem de moldura de estrela, com o fundo apagado

width:100%;

height:auto;

background:#76003A; // esta cor de background é a cor da estrela com fundo apagado

}

.nota>i>a:hover ~ a:link{

opacity:1;

}

</style>

A última linha eu destaquei de azul e não expliquei na hora, porque é ali que acontece o pulo do gato...

Quando comecei a fazer esse código minha ideia era detectar a posição do mouse, e pintar as estrelas da estrela atual, pra trás, porém, não consegui achar um código CSS que fazia isso... Depois de quebrar a cabeça, minha conclusão foi...

Primeiro eu acendo todas as estrelas;

.nota:hover{background-position:0px 0px !important;}

As estrelas dentro dos links são com fundo apagado e estão invisíveis;

O mouse está sobre uma estrela, então defino que à partir dela, os outros links ficarão visíveis... Ou seja:

.nota>i>a:hover ~ a:link{opacity:1;}

Cada parte do código está da mesma cor que sua explicação...

Finalizando

No final de tudo isso teremos algo assim:

<style>

.nota{

display:block;

width:130px;

height:21px;

background: #76003A url(imgs/bar.png) repeat-y;

}

.nota:hover{

background-position:0px 0px !important;

}

.nota i{

display: block;

width: 130px;

height: 100%;

background: url(imgs/moldura_estrela.png) repeat-x;

}

.nota a:link{

display:block;

float:left;

width:20%;

opacity:0;

}

.nota img{

width:100%;

height:auto;

background:#76003A;

}

.nota>i>a:hover ~ a:link{

opacity:1;

}

</style>

<i>

</i>

</span>

Lembre-se de que o CSS sempre vem antes do HTML, neste caso coloquei o HTML antes por uma questão de aprendizado, é mais fácil de entender como funciona o CSS, tendo a estrutura HTML pronta...

Você também pode desenvolver seu CSS dessa forma, primeiro faz o HTML, depois insere uma tag em cima do que você já fez e cria o CSS...

O segundo lembrete é que, pra testes pode-se usar o CSS dentro da tag <body>, porém quando estiver tudo pronto o certo é inserir dentro da tag <head>...

E aí, estão curiosos pra ver o resultado do nosso código? Demorou então...

Resultado

Bom, eu fiquei com preguiça de refazer uma imagem com moldura branca, então modifiquei um pouquinho meu código fazendo uma caixinha pras estrelas...rsrs Se você tiver preguiça pode fazer isso também...rs
Lembrando que o código acima não vai funcionar, pois você tem que substituir os links das imagens... Os links que estão aí são apenas pra você saber onde cada imagem vai... Você deve fazer o upload de suas imagens em algum lugar e depois colocar os links substituindo os atuais... Não vou ensinar isso, porque é muito fácil...rsrs

Por hoje é isso, qualquer dúvida podem perguntar que tentarei ajudá-los!
Valeu!

Pesquisar este blog

Como Fazer "Certo"