Сегодня в этом блоге вы узнаете, как создать виджет звездного рейтинга, используя только HTML и CSS. Я уверен, что вы видели звездную рейтинговую систему или виджет на многих веб-сайтах электронной коммерции и в приложении. Я знаю, что виджет обзора динамический, но его дизайн создан в HTML CSS & JavaScript или любой библиотеке JS. Во-первых, дизайнеры создали рейтинг или обзорный пользовательский интерфейс (пользовательский интерфейс), а разработчики подключили его к базе данных.
Как вы можете видеть на изображении, это виджет звездного рейтинга с динамическим текстом с использованием HTML и CSS. Это программа на чистом CSS, что означает, что в этом виджете не используется библиотека Javascript или JS.
Вы можете использовать этот виджет на своих сайтах после нескольких изменений в кодах в соответствии с вашими требованиями. И я считаю, что вы можете вывести этот виджет звездного рейтинга на новый уровень. Если вам трудно понять, что я говорю. Вы можете посмотреть полный видеоурок по этой программе (Виджет звездного рейтинга).
Видеоруководство по виджету звездного рейтинга с использованием HTML и CSS
Надеюсь, вам понравилась эта программа (Виджет звездного рейтинга) и вы поняли основные коды и понятия этого виджета. Если вам нравится этот виджет звездного рейтинга и вы хотите получить исходные коды. Вы можете легко получить исходные коды этой программы. Чтобы получить исходные коды, вам просто нужно прокрутить вниз.
Виджет звездного рейтинга с использованием HTML и CSS [Исходные коды]
Чтобы создать эту программу (виджет звездного рейтинга). Во-первых, вам нужно создать два файла: один файл HTML, а другой — файл CSS. После создания этих файлов просто вставьте следующие коды в свой файл. Сначала создайте файл HTML с именем index.html и вставьте данные коды в свой файл HTML. Помните, что вы должны создать файл с расширением .html.
HTML КОД:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Star Rating | CodingNepal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="center">
<div class="stars">
<input type="radio" id="five" name="rate" value="5">
<label for="five"></label>
<input type="radio" id="four" name="rate" value="4">
<label for="four"></label>
<input type="radio" id="three" name="rate" value="3">
<label for="three"></label>
<input type="radio" id="two" name="rate" value="2">
<label for="two"></label>
<input type="radio" id="one" name="rate" value="1">
<label for="one"></label>
<span class="result"></span>
</div>
</div>
</body>
</html>
Во-вторых, создайте файл CSS с именем style.css и вставьте данные коды в свой файл CSS. Помните, что вы должны создать файл с расширением .css.
CSS КОД:
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.center{
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.center .stars{
height: 150px;
width: 500px;
text-align: center;
}
.stars input{
display: none;
}
.stars label{
float: right;
font-size: 100px;
color: lightgrey;
margin: 0 5px;
text-shadow: 1px 1px #bbb;
}
.stars label:before{
content: '★';
}
.stars input:checked ~ label{
color: gold;
text-shadow: 1px 1px #c60;
}
.stars:not(:checked) > label:hover,
.stars:not(:checked) > label:hover ~ label{
color: gold;
}
.stars input:checked > label:hover,
.stars input:checked > label:hover ~ label{
color: gold;
text-shadow: 1px 1px goldenrod;
}
.stars .result:before{
position: absolute;
content: "";
width: 100%;
left: 50%;
transform: translateX(-47%);
bottom: -30px;
font-size: 30px;
font-weight: 500;
color: gold;
font-family: 'Poppins', sans-serif;
display: none;
}
.stars input:checked ~ .result:before{
display: block;
}
.stars #five:checked ~ .result:before{
content: "I love it ";
}
.stars #four:checked ~ .result:before{
content: "I like it ";
}
.stars #three:checked ~ .result:before{
content: "It's good ";
}
.stars #two:checked ~ .result:before{
content: "I don't like it ";
}
.stars #one:checked ~ .result:before{
content: "I hate it ";
}
Вот и все, теперь вы успешно создали виджет звездного рейтинга, используя только HTML и CSS. Если ваш код не работает или вы столкнулись с какой-либо ошибкой/проблемой, прокомментируйте или свяжитесь с нами со страницы контактов.