En este artículo, crearemos una barra de calificación de 5 estrellas usando CSS y HTML . Se utiliza una barra de calificación de 5 estrellas para recopilar opiniones o comentarios de los usuarios. Los usuarios pueden dar una calificación de 5 según su satisfacción. Crearemos el diseño o diseño de la barra de calificación.
Acercarse:
- Para los íconos de estrellas, estamos usando la biblioteca de íconos Font-Awesome .
- Cree el diseño utilizando HTML.
- Para estilos, use las propiedades CSS.
Biblioteca CSS: para usar los iconos de Font Awesome, debemos agregar la biblioteca en el archivo HTML usando la etiqueta de enlace.
<enlace href=”https://pro.fontawesome.com/releases/v5.10.0/css/all.css” rel=”stylesheet”/>
Al agregar el enlace, podemos acceder a los iconos proporcionados por esta biblioteca. Puede obtener el enlace para su propio proyecto en el sitio web de Font-Awesome o puede usar el mismo enlace que hemos mencionado anteriormente.
Sintaxis: para usar Star Icon, use la siguiente sintaxis.
<i class="fas fa-star"></i>
Nota: Consulte el artículo Iconos CSS para una mejor comprensión.
Ejemplo: hemos creado una barra de calificación de 5 estrellas utilizando el enfoque anterior. Hemos añadido una clase pulsada en la etiqueta del icono. Esta clase se utiliza para cambiar el color de la estrella. Hemos agregado las propiedades CSS en la etiqueta de estilo .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rating Bar</title>
<link href=
"https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
rel="stylesheet" />
<style>
.rating {
font-size: 40px;
}
.clicked {
color: rgb(135, 187, 32);
}
</style>
</head>
<body>
<h1>5 Star Rating Bar</h1>
<div class="rating">
<i class="fa fa-star clicked"></i>
<i class="fa fa-star clicked"></i>
<i class="fa fa-star clicked"></i>
<i class="fa fa-star clicked"></i>
<i class="fa fa-star"></i>
</div>
</body>
</html>
Producción:
Barra de calificación de 5 estrellas usando CSS
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA