Learn to craft eye-catching star ratings using HTML and CSS with our step-by-step tutorial. Elevate your web design and user engagement effortlessly.
Table of Contents
Welcome to our guide on creating captivating star ratings using HTML and CSS. In this tutorial, we'll walk you through each step to enhance your website's user interaction.
Why Use Star Ratings?
Star ratings provide a visually appealing and intuitive way for users to express their opinions. They are widely recognized and encourage quick feedback.
Whether you're a seasoned developer or just starting, this tutorial will equip you with the skills to implement an interactive star rating system seamlessly. Let's dive in and elevate your web design to the next level!
Source Code
Step 1 (HTML Code):
To get started, create a basic HTML structure for your star rating system.
Let me break down the code for you:
1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used (HTML5 in this case).
2. <html lang="en">: This tag defines the root element of the HTML document, and the lang attribute is set to "en" to indicate that the content is in English.
3. <head>: This section contains meta-information about the HTML document, such as character set, viewport settings, and the title of the page.
- <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8, which is a widely used character encoding for displaying various characters.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag is used to instruct Internet Explorer to use its latest rendering engine.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag sets the viewport properties for responsive design, ensuring that the page adapts to different device widths.
- <title>Star Rating</title>: Sets the title of the webpage to "Star Rating," which is displayed in the browser's title bar or tab.
- <link rel="stylesheet" href="styles.css">: Links an external CSS (Cascading Style Sheets) file named "styles.css" to apply styles to the HTML content.
4. <body>: This section contains the main content of the HTML document.
5. <div class="star-rating">: This div represents the container for the star rating component.
6. <div class="stars">: This div contains the individual star elements.
- <label class="number"><input type="radio" name="rating" value="0"></label>: Represents the first star with a corresponding radio input. The value attribute is set to "0".
- <label class="star"><input type="radio" name="rating" value="1"></label>: Represents the second star with a corresponding radio input. The value attribute is set to "1".
- Similar labels and radio inputs are provided for the remaining stars, each with an incremented value attribute.
- <div class="number-rating"></div>: This div is presumably intended for displaying the numeric rating, but it's currently empty.
Step 2 (CSS Code):
Make your star ratings visually appealing by applying CSS styles. Customize the size, color, and spacing to match your website's aesthetic.
Let's break down the code:
1. @import url('https://fonts.googleapis.com/css2?family=Days+One&display=swap');
- This imports the "Days One" font from Google Fonts and makes it available for use in the document.
2. :root { ... }
- Defines global variables using CSS custom properties. For example, --tran sets the transition property, --dark and --back set colors for the background gradient.
3. * { outline: none; }
- Removes default outlines from all elements, which is a common practice to improve visual appearance.
4. body { ... }
- Styles the body element with a radial gradient background and some basic settings for layout and appearance.
5. Styles for stars:
- :hover and :checked pseudo-classes are used to define styles when stars are hovered over or checked (selected).
- Custom properties like --star are used to set the color of the stars.
- transform and transition properties are employed to add animations when stars are checked or hovered over.
6. .star-rating { ... } and .stars { ... }
- Styles for the container of the star rating and the stars themselves.
7. .star { ... }
- Styles for individual stars, including gradients, animations, and transitions.
8. Styles for the number rating:
- Numbers are displayed based on the selected star using the :has pseudo-class.
- The numbers are positioned using body:has(...) and .star:nth-child(...) selectors.
9. .number { ... }
- Styles for the hidden input element that allows capturing the number rating when a star is clicked.
10. .number:before { ... }
- Styles for the visual representation of the number, which include a radial gradient background and a rotating animation when hovered.
@import url('https://fonts.googleapis.com/css2?family=Days+One&display=swap');
:root {
--tran: all 0.5s ease 0s;
--dark: #1c2429;
--back: #1d659f;
}
* { outline: none; }
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient( circle at 50% 50%, var(--back), #11114e);
}
.star:hover,
.star:has(~ .star:hover),
.star:has(:checked),
.star:has(~ .star :checked) {
--star: #ffd900;
}
.number:hover ~ .star:has(~ .star :checked),
.number:hover ~ .star:has(:checked),
.star:hover ~ .star:has(~ .star :checked),
.star:hover ~ .star:has(:checked) {
--star: #1c619c;
}
.number:hover ~ .star:has(~ .star :checked):after,
.number:hover ~ .star:has(:checked):after,
.star:hover ~ .star:has(~ .star :checked):after,
.star:hover ~ .star:has(:checked):after {
clip-path: polygon(28% 55%, 2% 41%, 30% 31%, 36% 1%, 53% 24%, 28% 55%, 35% 62%, 68% 44%, 98% 52%, 73% 68%, 75% 99%, 52% 80%, 24% 91%, 35% 62%);
}
.number:hover ~ .star:has(~ .star :checked),
.number:hover ~ .star:has(:checked),
.star:hover ~ .star:has(~ .star :checked),
.star:hover ~ .star:has(:checked) {
background: var(--dark);
transition: all 0.1s ease 0s;
transition: var(--tran);
}
.star:has(:checked) {
transform: scale(1.25);
transition-timing-function: linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
}
.star-rating {
padding: 2vmin 10vmin 2.25vmin 4vmin;
border-radius: 10vmin;
font-size: 5vmin;
position: relative;
background: var(--dark);
}
.stars {
display: flex;
}
.star {
display: grid;
place-items: center;
padding: 1vmin;
cursor: pointer;
transition: var(--tran);
background: radial-gradient(circle at 50% 50%, #1c5e98 1vmin, #fff0 calc(1vmin + 1px) 100%);
}
.star input,
.star::before,
.star::after {
grid-area: star;
width: 5vmin;
height: 5vmin;
margin: 0 0.5vmin;
}
.star [type="radio"] {
appearance: none;
}
.star::before,
.star::after {
content: "";
width: 100%;
height: 100%;
clip-path: polygon(50% 0%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%);
}
.star::after {
transition: all ease-in-out 130ms;
width: calc(100% - 0.25vmin);
height: calc(100% - 0.25vmin);
background: var(--star);
}
.number-rating:before {
content: "0";
font-family: 'Days One', sans-serif;
display: grid;
place-items: center;
background: #ffd900;
color: var(--dark);
position: absolute;
margin-top: -3.1vmin;
border-radius: 100%;
margin-left: 2vmin;
font-size: 6vmin;
width: 13vmin;
height: 13vmin;
}
body:has(.star:nth-child(2) > input:checked) .star-rating .number-rating:before {
content: "1";
}
body:has(.star:nth-child(3) > input:checked) .star-rating .number-rating:before {
content: "2";
}
body:has(.star:nth-child(4) > input:checked) .star-rating .number-rating:before {
content: "3";
}
body:has(.star:nth-child(5) > input:checked) .star-rating .number-rating:before {
content: "4";
}
body:has(.star:nth-child(6) > input:checked) .star-rating .number-rating:before {
content: "5";
}
body:has(.number:hover) .star-rating .number-rating:before {
content: "0" !important;
}
body:has(.star:nth-child(2):hover) .star-rating .number-rating:before {
content: "1" !important;
}
body:has(.star:nth-child(3):hover) .star-rating .number-rating:before {
content: "2" !important;
}
body:has(.star:nth-child(4):hover) .star-rating .number-rating:before {
content: "3" !important;
}
body:has(.star:nth-child(5):hover) .star-rating .number-rating:before {
content: "4" !important;
}
body:has(.star:nth-child(6):hover) .star-rating .number-rating:before {
content: "5" !important;
}
.number input {
display: none;
}
.number {
right: -5vmin;
top: -1vmin;
z-index: 1;
height: 13vmin;
width: 13vmin;
position: absolute;
cursor: pointer;
border-radius: 100%;
}
.number:before {
--ar: var(--dark);
content: "";
position: absolute;
width: 13vmin;
height: 13vmin;
border-radius: 100%;
transform: rotate(0deg);
background:
radial-gradient(circle at 50% 125%, #fff0 45%, var(--ar) calc(45% + 1px) 50%, #fff0 calc(50% + 1px) 100%),
radial-gradient(circle at 50% -25%, #fff0 45%, var(--ar) calc(45% + 1px) 50%, #fff0 calc(50% + 1px) 100%),
conic-gradient(from -45deg at 50% 60%, var(--ar) 0 25%, #fff0 0 100%),
conic-gradient(from 135deg at 50% 40%, var(--ar) 0 25%, #fff0 0 100%);
background-size: 100% 45%, 100% 45%, 1.75vmin 1.75vmin, 1.75vmin 1.75vmin;
background-repeat: no-repeat;
background-position: 0% -10%, 0% 110%, 90% 52%, 10% 46%;
transition: var(--tran);
opacity: 0.05;
}
.number:hover:before {
transform: rotate(360deg);
opacity: 1;
} Final Output:
Conclusion:
Congratulations! You've successfully implemented a star rating system using HTML and CSS. Enhance your website's user experience and gather valuable feedback effortlessly.
Feel free to share your newly acquired knowledge with your network and stay tuned for more exciting web development tutorials!
Code by: Josetxu
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 😊
