Cara Membuat Rating Menggunakan HTML5 dan CSS3

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Pada tutorial kali ini saya akan mencoba membagi Cara Membuat Rating Menggunakan HTML5 dan CSS3.

Rating adalah perhitungan secara statistikal dan biasa digunakan untuk mengukur tingkat popularitas suatu program, pelayanan, kepuasan pelanggan, dan lain-lain.

Nah, Sekarang saya akan Membuat Rating Menggunakan HTML5 dan CSS3 sebagai contoh saja. Berikut tutorial singkat tentang Cara Membuat Rating Menggunakan HTML5 dan CSS3:

– Pertama teman-teman buat struktur dasar HTML-nya dulu bawah ini :

<!DOCTYPE html>
<html>
<head>
    <title>Rating</title>
    
</head>
<body>
<h1>Silahkan Berikan Rating Anda:</h1>
<fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
</body>
</html>

Apabila kita buka di browser maka tampilannya akan seperti ini:

– Kedua teman-teman ketikan css-nya:

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style untuk rating star *****/

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS untuk hover nya *****/

.rating > input:checked ~ label, /* memperlihatkan warna emas pada saat di klik */
.rating:not(:checked) > label:hover, /* hover untuk star berikutnya */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover untuk star sebelumnya  */

.rating > input:checked + label:hover, /* hover ketika mengganti rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* seleksi hover */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  }

Jangan lupa save dengan nama style.css, setelah itu teman-teman buka kembali file index.htmlnya lalu masukan link di bawah ke dalam tag head:

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Buka lagi browser teman-teman lalu refresh atau tekan tombol f5 pada keyboard, maka hasilnya akan menjadi sepertin ini:

Ketika kita klik bintangnya maka akan menunjukan rating yang kita berikan.

Bagaimana teman-teman cukup mudahkan Membuat Rating Menggunakan HTML5 dan CSS3.

Sekian artikel saya hari ini tentang Cara Membuat Rating Menggunakan HTML5 dan CSS3.

Sehat selalu ya teman-teman, selamat mencoba.

Cara Membuat Rating Menggunakan HTML5 dan CSS3

Kategori