CSS - Animierte Sternebewertung
![[Bildschirmfoto]
CSS - Animierte Sternebewertung](img/anim/sternebewertung.gif "[Bildschirmfoto]
CSS - Animierte Sternebewertung")
Diese Bewertung kommt ganz ohne JavaScript aus und funktioniert nur mit HTML und CSS.
Die Sterne
leuchten und drehen sich und werden von allen modernen Browsern dargestellt.
Demo
➤ Tipp: Klicken Sie die Sterne einzeln nacheinander an.
Quelltext: sternebewertung.htm Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘
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
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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);
filter: drop-shadow(0px 0px 3px #FFD700);
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);
filter: drop-shadow(0px 0px 2px #FFD700);
}
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);
filter: drop-shadow(0px 0px 2px #FFD700);
}
@keyframes twinkle {
to {
text-shadow: 1px 1px #FFE653, 2px 2px #FFF5BF, .1em .1em .2em rgba(0,0,0,.5);
filter: drop-shadow(0px 0px 5px #FFD700);
transform: rotate(10deg);
}
}
</style>
</head>
<body>
<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>
</body>
</html>
In Zeile 50 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 Datenbank-Tabelle.
Quelltext: sternebewertung.php Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘
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
101
102
103
104
105
<?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_STERNE, 1);
$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 == 1 ? ' Stern' : ' Sterne') . '">' .
$value . ($value == 1 ? ' 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: 21 Die Struktur der DB-Tabelle.
Zeile: 94 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 Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<sub> Physische Auszeichnung