CSS - Animierte Sternebewertung

[Bildschirmfoto / Grafik]
 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 AusblendenKopierenLinkZeilen

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 AusblendenKopierenLinkZeilen

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_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: 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.

<li> Listenelement

CSS - Pflichtfeld hervorheben

PHP - Sonnenauf.- und Sonnenuntergang mit der Geolocation API auslesen

JavaScript - Lichtregler

MySQL - Text in einer Spalte austauschen

Uneinheitliches Design
Einheitliches Design ist wichtig, da die Besucher ansonsten die Orientierung verlieren und nicht mehr wissen, ob sie sich überhaupt noch auf Ihrer Seite befinden.
Aufgrund des Wiedererkennungswertes und nicht zuletzt der damit verbundenen Arbeitserleichterung, empfiehlt es sich, ein und dasselbe Layout für alle Seiten zu verwenden.