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.


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 3.5s steps(2, start) infinite;
}

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
89
90
91
92
93
94
95
96
97
98
99
100
<?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 '';

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

/*
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;
*/

// Daten wurden über das Formular gesendet
if ($_SERVER["REQUEST_METHOD"] == "POST") {
 if (isset(
$_POST["bewertung"])) {

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

  if (
$cmd->execute([':bewertung' => $_POST["bewertung"],
                               
':id' => $_POST["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
$array range($ANZAHL_STERNE1);
$bewertungRB '';

foreach (
$array as $value) {
 
$bewertungRB .= '<input type="radio" name="bewertung" value="' $value '" id="stern' $value '"';

 if (
$BEWERTUNG == $value) {
  
$bewertungRB .= ' checked="checked"';
 }

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

$bewertungRB .= <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">$bewertungRB '</p>

 <p>
  <input type="hidden" name="id" value="' $ID '">
  <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: 20 Die Struktur der DB-Tabelle.
Zeile: 91 Es wird die Datei: "sternebewertung.css" referenziert.

Bausteine

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

CSS - Container horizontal drehen

PHP - Formulareingaben überprüfen und Fehlermeldungen ausgeben

JavaScript - Trinitätsoperator

MySQL - Datensatz Wert um 10% veringern