Learn how to implement an interactive star rating concept on your website with this easy-to-follow tutorial. Customize the star rating system using HTML and CSS for a better user experience. Get started now!
Table of Contents
The star rating concept has become an integral part of modern web design, offering a simple yet effective way for users to provide feedback and ratings on various items, services, or content. Whether you run an e-commerce store, a movie review website, or a restaurant rating platform, implementing a star rating system can significantly enhance user engagement and interaction.
In this comprehensive tutorial, we will guide you through the step-by-step process of creating a fully functional and customizable star rating concept using HTML and CSS. Whether you are a web developer looking to add interactivity to your website or a beginner eager to learn more about HTML and CSS, this guide is tailored to suit your needs.
Why Use a Star Rating Concept?
Before we delve into the technicalities, let's understand why the star rating concept is so popular and how it benefits websites and users alike.
- Visual Appeal and Simplicity: Star ratings are visually appealing and intuitive. They offer users a straightforward way to express their opinions without having to write lengthy reviews. A simple click on the stars enables users to rate their satisfaction levels, making the process quick and convenient.
- Enhanced User Experience: Interactive elements like star ratings make websites more user-friendly and enjoyable. By providing users with an opportunity to participate actively, you can create a positive user experience, which can lead to increased user loyalty and repeat visits.
- Better Decision Making: For users, star ratings act as a helpful guide in decision-making. Whether they are looking for a highly-rated product, a top-rated restaurant, or a critically acclaimed movie, star ratings provide a clear and reliable metric for making informed choices.
- Valuable Feedback and Insights: As a website owner or content provider, star ratings offer you valuable feedback and insights into your offerings. Understanding what your users like or dislike can help you make data-driven decisions for continuous improvement.
What You Will Learn
In this tutorial, we will cover everything you need to know to create an interactive and eye-catching star rating concept from scratch. We will start with setting up the HTML structure and proceed with styling the stars using CSS.
Prerequisites:
To make the most of this tutorial, a basic understanding of HTML and CSS will be beneficial. However, we will provide explanations and code examples suitable for beginners, so don't worry if you are new to web development – you'll be able to follow along and learn as you go.
Now that we've covered the groundwork, let's dive into the exciting world of star rating concepts using HTML and CSS!
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our star rating concept.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down the code step by step:
1. <!DOCTYPE html>: This line defines the document type as HTML5.
2. <html lang="en">: The opening tag for the HTML document, specifying that the language used is English ("en").
3. <head>: The head section of the document contains meta-information about the page.
4. <title>Star Rating Concept</title>: This sets the title of the web page, which will be displayed in the browser's title bar or tab.
5. <meta charset="UTF-8" />: This meta tag specifies the character encoding of the page, in this case, UTF-8, which supports a wide range of characters.
6. <meta name="viewport" content="width=device-width" />: This meta tag sets the viewport's width to the device width, ensuring that the page is displayed correctly on various devices.
7. <link rel="stylesheet" href="styles.css" />: This line links an external CSS file (styles.css) to the HTML document, which is used to apply styling to the page.
8. <body>: The body section of the document that contains the visible content of the web page.
9. <form class="rating">: This creates a form element with a class attribute "rating," indicating that it represents a rating form.
10. <div class="rating__stars">: Inside the form, a div with class "rating__stars" is created. This div will contain the star rating elements.
11. <input>: There are five input elements, each representing a star in the rating system. They have different IDs (rating-1, rating-2, ... rating-5), different classes (rating__input rating__input-1, ... rating__input-5), and the same name "rating" but different values (1 to 5). The input type is set to "radio," which means only one of the stars can be selected at a time.
12. <label>: There are five label elements, each associated with an input element using the "for" attribute. When a user clicks on the label, it will activate the corresponding input (radio) element and, thus, select the associated star.
13. <svg>: Inside each label, there is an SVG element that represents a star icon. SVG (Scalable Vector Graphics) is a vector-based format used for creating graphics that can be scaled without losing quality.
14. <span class="rating__sr">: After each SVG, there is a span element with class "rating__sr" that displays the text representing the star rating (e.g., "1 star," "2 stars," etc.).
This is the basic structure of our star rating concept using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the star rating is in place, the next step is to add styling to the star rating using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our star rating concept.
Let's go through the code step by step:
The first CSS block selects all elements in the HTML and applies some common styles:
- It removes the default borders, sets the box-sizing to "border-box" (so padding and border won't affect the element's size), and removes margins and paddings.
- It also sets a root variable "--hue" to 223, which is used to define the hue for various color variations.
The :root selector sets various CSS variables using the "--hue" variable and defines some color and animation-related variables. These variables are used later in the code to maintain consistency and ease of customization.
The body selector styles the entire body of the webpage:
- It sets the background color to the value of the "--bg" variable, which is calculated using the "--hue" variable.
- It sets the text color to the value of the "--fg" variable, which is also calculated using the "--hue" variable.
- The "display: flex;" property is applied to the body, making its direct children follow a flexbox layout.
- The "font: 1em/1.5 sans-serif;" property sets the font size and line height for the body's text content.
- The "height: 100vh;" sets the body's height to be 100% of the viewport height.
- The "transition" property adds a smooth transition effect for changes in background color and text color, using the values defined in "--trans-dur" for the transition duration.
The .rating class styles an element that contains the star rating system:
- It centers the content horizontally by using "margin: auto;".
The .rating__stars class styles the container for the stars:
- It sets "display: flex;" to arrange the stars in a row.
- It sets "position: relative;" to ensure proper positioning of the star-related elements.
The .rating__star class styles each individual star:
- It sets the star's width and height to 2em, making them a square.
The .rating__star-body, .rating__star-body-g, and .rating__star-shadow classes are used for styling the star's body, shadow, and glowing effect, respectively. These classes define animation properties, such as animation duration, timing function, and fill mode.
The .rating--pristine class is used to style the star rating system when no rating is selected. It disables animation by setting animation duration to 0s.
The .rating__label and .rating__input classes are used to style the labels and input elements for the star rating system.
The .rating__input-x classes are used for the interactive effects when hovering over or selecting a particular star. The "x" in these classes represents the number of stars filled in the rating.
The .rating__sr class is used for screen reader accessibility, ensuring that it remains hidden from visual display while still being accessible to screen readers.
The @keyframes rules define various animations used for the interactive effects of the star rating system. These animations control the scale, rotation, and fill color of the stars and their shadows.
This will give our star rating concept an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),90%,90%);
--fg: hsl(var(--hue),90%,10%);
--star: hsl(var(--hue),90%,50%);
--star-dim: hsl(var(--hue),10%,70%);
--star-down: hsl(var(--hue),90%,20%);
--bezier: cubic-bezier(0.42,0,0.58,1);
--trans-dur: 0.3s;
font-size: calc(24px + (36 - 24) * (100vw - 320px) / (1280 - 320));
}
body {
background-color: var(--bg);
color: var(--fg);
display: flex;
font: 1em/1.5 sans-serif;
height: 100vh;
transition: background-color var(--trans-dur), color var(--trans-dur);
}
.rating {
margin: auto;
}
.rating__stars {
display: flex;
position: relative;
}
.rating__star {
display: block;
overflow: visible;
pointer-events: none;
width: 2em;
height: 2em;
}
.rating__star-body, .rating__star-body-g, .rating__star-shadow {
animation-duration: 1.2s;
animation-timing-function: var(--bezier);
animation-fill-mode: forwards;
}
.rating__star-body {
fill: var(--star-dim);
transform-origin: 16px 17.45px;
transition: fill var(--trans-dur) var(--bezier);
}
.rating__star-body-g {
animation-name: starShrink;
transform: scale(0.67);
transform-origin: 16px 31px;
}
.rating__star-shadow {
animation-name: starShadowShrink;
fill: hsla(var(--hue), 90%, 10%, 0.3);
transform: scale(0.67);
transform-origin: 16px 31px;
}
.rating--pristine .rating__star-body, .rating--pristine .rating__star-body-g, .rating--pristine .rating__star-shadow {
animation-duration: 0s;
}
.rating__label, .rating__input {
-webkit-tap-highlight-color: transparent;
}
.rating__label {
cursor: pointer;
padding: 0.1875em;
}
.rating__label--delay1 .rating__star-body, .rating__label--delay1 .rating__star-body-g {
animation-delay: 0.05s;
}
.rating__label--delay2 .rating__star-body, .rating__label--delay2 .rating__star-body-g {
animation-delay: 0.1s;
}
.rating__label--delay3 .rating__star-body, .rating__label--delay3 .rating__star-body-g {
animation-delay: 0.15s;
}
.rating__label--delay4 .rating__star-body, .rating__label--delay4 .rating__star-body-g {
animation-delay: 0.2s;
}
.rating__input {
-webkit-appearance: none;
appearance: none;
}
.rating__input-1:hover ~ .rating__label:first-of-type .rating__star-body, .rating__input-2:hover ~ .rating__label:nth-of-type(-n + 2) .rating__star-body, .rating__input-3:hover ~ .rating__label:nth-of-type(-n + 3) .rating__star-body, .rating__input-4:hover ~ .rating__label:nth-of-type(-n + 4) .rating__star-body, .rating__input-5:hover ~ .rating__label:nth-of-type(-n + 5) .rating__star-body {
fill: var(--star);
}
.rating__input-1:checked ~ .rating__label:first-of-type .rating__star-body, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-body, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-body, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-body, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-body {
animation-name: starSpin;
fill: var(--star);
}
.rating__input-1:checked ~ .rating__label:first-of-type .rating__star-body-g, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-body-g, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-body-g, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-body-g, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-body-g {
animation-name: starJump;
}
.rating__input-1:checked ~ .rating__label:first-of-type .rating__star-shadow, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-shadow, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-shadow, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-shadow, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-shadow {
animation-name: starShadow;
}
.rating__input-2:checked ~ .rating__label:nth-of-type(-n + 1):hover .rating__star-body, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 2):hover .rating__star-body, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 3):hover .rating__star-body, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 4):hover .rating__star-body {
fill: var(--star-down);
}
.rating__sr {
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
}
@keyframes starJump {
from {
transform: translateY(0) scale(0.67, 0.67);
}
20% {
transform: translateY(0) scale(0.75, 0.5);
}
40% {
transform: translateY(-100%) scale(1.15, 1.15);
}
60% {
transform: translateY(0) scale(1.1, 0.6);
}
80% {
transform: translateY(0) scale(0.95, 1.1);
}
to {
transform: translateY(0) scale(1, 1);
}
}
@keyframes starShadow {
from {
transform: scale(0.67, 1);
}
20% {
transform: scale(0.75, 1);
}
40% {
transform: scale(1.15, 1);
}
60% {
transform: scale(1.1, 1);
}
80% {
transform: scale(0.95, 1);
}
to {
transform: scale(1, 1);
}
}
@keyframes starShrink {
from {
animation-timing-function: ease-in;
transform: scale(1, 1);
}
20% {
animation-timing-function: ease-out;
transform: scale(0.6, 0.6);
}
40%, to {
transform: scale(0.67, 0.67);
}
}
@keyframes starShadowShrink {
from {
animation-timing-function: ease-in;
transform: scale(1, 1);
}
20% {
animation-timing-function: ease-out;
transform: scale(0.6, 1);
}
40%, to {
transform: scale(0.67, 1);
}
}
@keyframes starSpin {
from, 20% {
transform: rotate(0);
}
60%, to {
transform: rotate(144deg);
}
} Final Output:
Conclusion:
Congratulations! You have successfully created a star rating concept using HTML and CSS. You've learned how to structure the HTML and style the stars with CSS. By customizing the star rating system, you can create a unique and engaging experience for your website visitors.
Start using the star rating concept to gather valuable feedback and ratings from your users today!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
