CSS - Animierte Sternebewertung

Diese Bewertung kommt ganz ohne JavaScript aus und funktioniert nur mit HTML und CSS.

Die "Sterne" werden ab Internet Explorer (Version 9) angezeigt (frühere Versionen zeigen nur die Radiobuttons mit der Beschriftung). Aktuelle Versionen von Mozilla Firefox, Google Chrome und Microsoft Edge.



Die Bewertung ohne den Radiobutton, die Auswahl kann dann nicht mehr abgewählt werden!



Der Radiobutton wurde in diesem Beispiel mit CSS display:none unsichtbar gemacht.
Auf "Bewertung" klicken um die Bewertung abzuwählen.


Tipp: Klicken Sie die Sterne einzeln nacheinander an.

Hier nun der Quelltext für das erste Beispiel

Quelltext „sternebewertung.htmKopierenAusblendenZeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<style>
/* Sternebewertung */

span#Bewertung label {
 line-height: 45px;
 cursor: Pointer;
}

span#Bewertung input[type="radio"] {
 /*display: None;*/ 
}

p.sternebewertung {
 float: Left;
}

p.sternebewertung:not(:checked) > input {
 display: None;
}

p.sternebewertung:not(:checked) > label {
 float: Right;
 width: 1em;
 padding: 0 .1em;
 overflow: Hidden;
 white-space: Nowrap;
 cursor: Pointer;
 font-size: 200%;
 line-height: 1.2;
 color: #D0D0D0;
 text-shadow: 1px 1px #B0B0B0, 2px 2px #606060, .1em .1em .2em rgba(0,0,0,.5);
 transition: all .5s;
}

p.sternebewertung:not(:checked) > label::before {
 content: '★ ';
}

p.sternebewertung > input:checked ~ label {
 color: #FFD700;
 text-shadow: 1px 1px #C06000, 2px 2px #904000, .1em .1em .2em rgba(0,0,0,.5);
 animation: twinkle 1s ease-in-out infinite alternate;
}

p.sternebewertung:not(:checked) > label:hover,
p.sternebewertung:not(:checked) > label:hover ~ label {
 color: #FECF41;
 text-shadow: 1px 1px #F29E02, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

p.sternebewertung > input:checked + label:hover,
p.sternebewertung > input:checked + label:hover ~ label,
p.sternebewertung > input:checked ~ label:hover,
p.sternebewertung > input:checked ~ label:hover ~ label,
p.sternebewertung > label:hover ~ input:checked ~ label {
 color: #FBB600;
 text-shadow: 1px 1px #F8BA01, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

@keyframes twinkle {
 to {
  text-shadow: 1px 1px #FFE653, 2px 2px #FFF5BF, .1em .1em .2em rgba(0,0,0,.5);
 }
}
</style>


<p class="sternebewertung">
 <input type="radio" id="stern5" name="bewertung" value="5"><label for="stern5" title="5 Sterne">5 Sterne</label>
 <input type="radio" id="stern4" name="bewertung" value="4"><label for="stern4" title="4 Sterne">4 Sterne</label>
 <input type="radio" id="stern3" name="bewertung" value="3"><label for="stern3" title="3 Sterne">3 Sterne</label>
 <input type="radio" id="stern2" name="bewertung" value="2"><label for="stern2" title="2 Sterne">2 Sterne</label>
 <input type="radio" id="stern1" name="bewertung" value="1"><label for="stern1" title="1 Stern">1 Stern</label>
 <span id="Bewertung" title="Keine Bewertung">
  <label><input type="radio" name="bewertung" value="0" checked="checked"> Bewertung:</label>
 </span>
</p>

In Zeile 42 kann die Animation deaktiviert werden.

Die Sternebewertung sollte in ein Formular eingebunden werden in dem noch mehr Daten des Benutzers abgefragt werden (Gästebuch, Kommentar-Funktion, etc.), ansonsten ist man der Manipulation des Benutzers ausgeliefert!

Datei: sternebewertung.htm als ZIP-Datei herunterladen: sternebewertung.zip

Sternebewertung in eine MySQL DB-Tabelle eintragen und auslesen

Irgendwo müssen die Sterne gespeichert werden, am einfachsten ist das in einer MySQL DB-Tabelle.

Quelltext „sternebewertung.phpKopierenAusblendenZeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<?php
/*
 Sternebewertung in eine MySQL DB-Tabelle eintragen und auslesen
*/

// Eine ID für jede Bewertung
$ID "4711";

// Anzahl der Sterne
$ANZAHL_STERNE 5;

// Ohne Bewertung!
$BEWERTUNG 0;

$status $radioButtons '';

// Verbindung zur Datenbank
$db = new PDO('mysql:host=localhost;dbname=test;charset=utf8''root''');

/* DB-Tabelle erstellen
CREATE TABLE `sternebewertung` (
  `id` int(11) NOT NULL,
  `bewertung` int(11) NOT NULL,
  UNIQUE KEY `id` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
*/

// Bewertung eintragen oder aktualisieren
if (isset($_POST["bewertung"])) {

 
$cmd $db->prepare("INSERT INTO `sternebewertung`
  (`bewertung`, `id`) VALUES (:bewertung, :id)
  ON DUPLICATE KEY UPDATE
  `bewertung` = :bewertung;");

 if (
$cmd->execute([':bewertung' => $_POST["bewertung"],
                              
':id' => $ID])) {
  
$status 'Sternebewertung: ' $_POST["bewertung"] . ' wurde eingetragen.';
 }
}

// Bewertung auslesen
$select $db->prepare("SELECT `bewertung` FROM `sternebewertung` WHERE `id` = :id");
$select->execute([":id" => $ID]);
$datensatz $select->fetch();

if (
$select->rowCount() == 1) {
 
$BEWERTUNG $datensatz["bewertung"];
}

// Radio-Buttons für das Formular erstellen
foreach (range($ANZAHL_STERNE1) as $stern) {
 
$radioButtons .= '<input type="radio" name="bewertung" value="' $stern '" id="stern' $stern '"';

 if (
$BEWERTUNG == $stern) {
  
$radioButtons .= ' checked="checked"';
 }

 
$radioButtons .= '>
 <label for="stern' $stern '" title="' $stern . ($stern == ' Stern' ' Sterne') . '">.
  
$stern . ($stern == ' Stern' ' Sterne') . '</label> ';
}

$radioButtons .= <span id="Bewertung" title="Keine Bewertung">
 <label><input type="radio" name="bewertung" value="0"> Bewertung:</label></span>';

// Formular erstellen
$formular '<form method="post">
 <p class="sternebewertung">$radioButtons '</p>
 <p><input type="submit" value="Absenden"></p>
 <p>$status '</p>
</form>';
?>
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Sternebewertung</title>
  <link rel="stylesheet" href="sternebewertung.css">
 </head>
<body>

<h1>Sternebewertung</h1>

<?=$formular;?>

</body>
</html>

Außerhalb des Quelltextes sind noch weitere Infos wichtig:

Zeile: 21 Die Struktur der DB-Tabelle.
Zeile: 91 Es wird die Datei: "sternebewertung.css" referenziert.

Tipp

Die Animierte Sternebewertung finden Sie zum Beispiel im Gästebuch (zum herunterladen).

Bausteine  [Alle Anzeigen]

Eine zufällige Auswahl von Bausteinen (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Vertikale Schrift

PHP - Doppelte Einträge im Array ausfiltern

JavaScript - Beim Anklicken einer Checkbox den dazugehörenden Text hervorheben

MySQL - Datensätze (Gehalt) zwischen 2000 und 3000 anzeigen