6

Encontré un diseño de unas estrellas aquí ¿Como crear tres estrella mas una estrella media sin :hover?

Estoy utilizando su mismo diseño, solo que las estrellas más pequeñas, al cambiar la imagen por más pequeñas el diseño se ha desordenado a pesar haber cambiando los valores no logro conseguir que se ordene correctamente.

Que valor debo ir cambiando para que se adapte de la misma manera de ese diseño solo que las estrellas son más pequeñas.

.c-rating {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.c-rating__item {
    -webkit-box-flex: 0;
     -webkit-flex: 0 0 12px;
    -ms-flex: 0 0 12px; 
    flex: 0 0 12px;
    height: 18px;
    background-position: -10px 0px;
    background-image: url(http://svgshare.com/i/4U0.svg);
    cursor: pointer;
}
.c-rating__item.left {
    background-position: 0px 0px;
}
.c-rating__item.is-active,
.c-rating__item:before {
    background-position: -33px 0;
}
.c-rating__item.left.is-active,
.c-rating__item.left:before {
    background-position: -21px 0;
}
<ul class="c-rating">
  <li class="c-rating__item is-active left" data-index="0"></li>
  <li class="c-rating__item is-active" data-index="1"></li>
  <li class="c-rating__item is-active left" data-index="2"></li>
  <li class="c-rating__item is-active" data-index="3"></li>
  <li class="c-rating__item is-active left" data-index="4"></li>
  <li class="c-rating__item is-active" data-index="5"></li>
  <li class="c-rating__item is-active left" data-index="6"></li>
  <li class="c-rating__item" data-index="7"></li>
  <li class="c-rating__item left" data-index="8"></li>
  <li class="c-rating__item" data-index="9"></li>
</ul>

3
  • hola @Pedro , si tu problema se soluciono, podias marcar como respuesta, para que pueda ayudar a otros, gracias. el 16 dic. 2017 a las 9:59
  • 1
    Hola @MiguelEspeso, tranquilo recién estoy apareciendo...
    – Pedro
    el 16 dic. 2017 a las 13:30
  • Hola, @Pedro Es así se pueden beneficiar otros, a mi en este caso me servira para implementarlo en mi web. Yo tube muchos problemas para coger la dinámica del sitio, me llegaron a eliminar preguntas, fue frustrante pero dando varios repasos a "como preguntar y viendo ejemplo de publicaciones, le he ido cogiendo el aire. Un saludo el 16 dic. 2017 a las 14:38

1 respuesta 1

2

Buenas amigo usa la propiedad de css transform:scale() y le pasas un numero del 0 al uno volviendo las estrellas mas pequeñas sin perder la forma

Ejemplo:

transform:scale(0.6)

Ejemplo funcional

NOTA: para el ejemplo agregue los estilos directo en el html. y agregue varios tamaños pero puedes elegir el que mas te convenga.

funciona con cualquier imagen y elemento del DOM y esta soportado por todos los navegadores pero tienes que usar el respectivo prefijo como -moz o -webkit entre otro

.c-rating {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    
}

.c-rating__item {
    -webkit-box-flex: 0;
     -webkit-flex: 0 0 12px;
    -ms-flex: 0 0 12px; 
    flex: 0 0 12px;
    height: 24px;
    background-position: -12px 0px;
    background-image: url(http://svgshare.com/i/3KS.svg);
    cursor: pointer;
}
.c-rating__item.left {
    background-position: 0px 0px;
}
.c-rating__item.is-active,
.c-rating__item:hover {
    background-position: -36px 0;
}
.c-rating__item.left.is-active,
.c-rating__item.left:hover {
    background-position: -24px 0;
}
<ul class="c-rating" style="transform:scale(0.9)">
  <li class="c-rating__item is-active left" data-index="0"></li>
  <li class="c-rating__item is-active" data-index="1"></li>
  <li class="c-rating__item is-active left" data-index="2"></li>
  <li class="c-rating__item is-active" data-index="3"></li>
  <li class="c-rating__item is-active left" data-index="4"></li>
  <li class="c-rating__item is-active" data-index="5"></li>
  <li class="c-rating__item is-active left" data-index="6"></li>
  <li class="c-rating__item" data-index="7"></li>
  <li class="c-rating__item left" data-index="8"></li>
  <li class="c-rating__item" data-index="9"></li>
</ul>
<ul class="c-rating" style="transform:scale(0.8)">
  <li class="c-rating__item is-active left" data-index="0"></li>
  <li class="c-rating__item is-active" data-index="1"></li>
  <li class="c-rating__item is-active left" data-index="2"></li>
  <li class="c-rating__item is-active" data-index="3"></li>
  <li class="c-rating__item is-active left" data-index="4"></li>
  <li class="c-rating__item is-active" data-index="5"></li>
  <li class="c-rating__item is-active left" data-index="6"></li>
  <li class="c-rating__item" data-index="7"></li>
  <li class="c-rating__item left" data-index="8"></li>
  <li class="c-rating__item" data-index="9"></li>
</ul>
<ul class="c-rating" style="transform:scale(0.7)">
  <li class="c-rating__item is-active left" data-index="0"></li>
  <li class="c-rating__item is-active" data-index="1"></li>
  <li class="c-rating__item is-active left" data-index="2"></li>
  <li class="c-rating__item is-active" data-index="3"></li>
  <li class="c-rating__item is-active left" data-index="4"></li>
  <li class="c-rating__item is-active" data-index="5"></li>
  <li class="c-rating__item is-active left" data-index="6"></li>
  <li class="c-rating__item" data-index="7"></li>
  <li class="c-rating__item left" data-index="8"></li>
  <li class="c-rating__item" data-index="9"></li>
</ul>
<ul class="c-rating" style="transform:scale(0.6)">
  <li class="c-rating__item is-active left" data-index="0"></li>
  <li class="c-rating__item is-active" data-index="1"></li>
  <li class="c-rating__item is-active left" data-index="2"></li>
  <li class="c-rating__item is-active" data-index="3"></li>
  <li class="c-rating__item is-active left" data-index="4"></li>
  <li class="c-rating__item is-active" data-index="5"></li>
  <li class="c-rating__item is-active left" data-index="6"></li>
  <li class="c-rating__item" data-index="7"></li>
  <li class="c-rating__item left" data-index="8"></li>
  <li class="c-rating__item" data-index="9"></li>
</ul>
<ul class="c-rating" style="transform:scale(0.5)">
  <li class="c-rating__item is-active left" data-index="0"></li>
  <li class="c-rating__item is-active" data-index="1"></li>
  <li class="c-rating__item is-active left" data-index="2"></li>
  <li class="c-rating__item is-active" data-index="3"></li>
  <li class="c-rating__item is-active left" data-index="4"></li>
  <li class="c-rating__item is-active" data-index="5"></li>
  <li class="c-rating__item is-active left" data-index="6"></li>
  <li class="c-rating__item" data-index="7"></li>
  <li class="c-rating__item left" data-index="8"></li>
  <li class="c-rating__item" data-index="9"></li>
</ul>

5
  • Muy interesante +1, ésto funciona con imágenes .svg o con cualquier imagen... Es compatible con cualquier navegador? Tiene algunas contra o no? el 16 dic. 2017 a las 4:29
  • 2
    si amigo funciona con cualquier imagen y elemento del DOM y esta soportado por todos los navegadores pero tienes que usar el respectivo prefijo como -moz o -webkit entre otros el 16 dic. 2017 a las 4:32
  • Ah! Perfecto muy interesante uno parece conocer todo pero siempre uno se sorprende en algo nuevo... Deberías añadir eso en la respuesta como recomendaciones usar los prefijo entre otros puntos importantes quizás... Saludos! el 16 dic. 2017 a las 4:37
  • Creo que confunde un poco lo que dices: y le pasas un numero del 0 al uno ... es decir que puedes escalarlo también a tamaño mayor si lo deseas, ej: transform:scale(2) (doble tamaño) el 16 dic. 2017 a las 9:01
  • para lo que se requiere que es menos tamaño seria menos de 1 amigo por eso el ejemplo se sabe que si quieres el doble es 2 pero eso no es lo que se necesita en este caso el 16 dic. 2017 a las 15:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.