Cara Membuat Rating Menggunakan HTML5 dan CSS3
Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Di panduan kali ini saya akan mencoba membagi Cara Merancang Rating Menggunakan HTML5 dan CSS3.
Rating yaitu perhitungan secara statistikal dan biasanya digunakan bagi mengukur tingkat popularitas suatu program, pelayanan, kepuasan kustomer, dan lain-lain.
Nah, Kini saya akan Merancang Rating Menggunakan HTML5 dan CSS3 selaku contoh saja. Berikut panduan singkat mengenai Cara Merancang Rating Menggunakan HTML5 dan CSS3:
– Pertama-tama teman-teman bikin struktur mendasar HTML-nya dulu bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Rating</title>
</head>
<body>
<h1>Silahkan Berikan Rating Kamu:</h1>
<fieldset class=rating>
<input type=radio id=star5 name=rating value=5 /><label class = full for=star5 title=Cara Merancang Rating Menggunakan HTML5 dan CSS3></label>
<input type=radio id=star4half name=rating value=4 and a half /><label class=half for=star4half title=Cara Merancang Rating Menggunakan HTML5 dan CSS3></label>
<input type=radio id=star4 name=rating value=4 /><label class = full for=star4 title=Cara Merancang Rating Menggunakan HTML5 dan CSS3></label>
<input type=radio id=star3half name=rating value=3 and a half /><label class=half for=star3half title=Cara Merancang Rating Menggunakan HTML5 dan CSS3></label>
<input type=radio id=star3 name=rating value=3 /><label class = full for=star3 title=Cara Merancang Rating Menggunakan HTML5 dan CSS3></label>
<input type=radio id=star2half name=rating value=2 and a half /><label class=half for=star2half title=Cara Merancang Rating Menggunakan HTML5 dan CSS3></label>
<input type=radio id=star2 name=rating value=2 /><label class = full for=star2 title=Cara Merancang Rating Menggunakan HTML5 dan CSS3></label>
<input type=radio id=star1half name=rating value=1 and a half /><label class=half for=star1half title=Cara Merancang Rating Menggunakan HTML5 dan CSS3></label>
<input type=radio id=star1 name=rating value=1 /><label class = full for=star1 title=Cara Merancang Rating Menggunakan HTML5 dan CSS3></label>
<input type=radio id=starhalf name=rating value=half /><label class=half for=starhalf title=Cara Merancang Rating Menggunakan HTML5 dan CSS3></label>
</fieldset>
</body>
</html>
Apabila kita buka di browser karenanya 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 bagi 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 bagi hover nya *****/
.rating > input:checked label, /* memperlihatkan warna emas di dikala di klik */
.rating:not(:checked) > label:hover, /* hover bagi star berikutnya */
.rating:not(:checked) > label:hover label { color: #FFD700; } /* hover bagi 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 pada 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 di keyboard, karenanya hasilnya akan menjadi sepertin ini:
Ketika kita klik bintangnya karenanya akan menunjukan rating yang kita berikan.
Bagaimana teman-teman lumayan mudahkan Merancang Rating Menggunakan HTML5 dan CSS3.
Demikianlah artikel saya hari ini mengenai Cara Merancang Rating Menggunakan HTML5 dan CSS3.
Sehat selalu ya teman-teman, selamat mencoba.
Sumber https://kursuswebsite.org
