Sistema de clasificación por estrellas accesible en CSS puro-Starability. CSS

Vista prévia

Descripción

Sólo otro sistema de clasificación por estrellas simple, animado y totalmente accesible construido sobre CSS puro, botones de radio e imágenes de sprites.

¿Cómo funciona?

Primero debe cargar el Starability. CSS en el encabezado de su página HTML.

 <link rel="stylesheet" href="starability-all.min.css">

La estructura HTML para crear un sistema básico de clasificación por estrellas. Cambie starability-básico a diferentes clases para ver las animaciones.

• starability-básico
• starability-slot
• starability-Grow
• starability-GrowRotate
• starablity-fade
• starability-Checkmark

<form>

<fieldset class="starability-básico">


 <legend>Basic star rating:</legend>



<input type="radio" id="rate5" name="rating" value="5" />


<label for="rate5" title="Amazing">5 stars</label>



<input type="radio" id="rate4" name="rating" value="4" />


<label for="rate4" title="Very good">4 stars</label>



<input type="radio" id="rate3" name="rating" value="3" />


<label for="rate3" title="Average">3 stars</label>



<input type="radio" id="rate2" name="rating" value="2" />


<label for="rate2" title="Not good">2 stars</label>



<input type="radio" id="rate1" name="rating" value="1" />


<label for="rate1" title="Terrible">1 star</label>

</fieldset>
</form>

Registro de cambios

v2.4.1 (08/19)

• Agregue compatibilidad con el modo de alto contraste en Windows.