CSS - Animierte Sternebewertung

[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).

Mehrere Sternebewertungen in einem Formular

[Bildschirmfoto] Mehrere Sternebewertungen in einem Formular

Quelltext:  mehrere_sternebewertungen.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
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Mehere Sternebewertungen in einem Formular</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="sternebewertung.css">
</head>

<body>

<form method="post">

<?php
// Mehere Sternebewertungen in einem Formular
$STERNE_ANZAHL = 5;
$array = range($STERNE_ANZAHL, 1);
$namen = ['Gesamtbewertung', 'Sauberkeit', 'Check-In', 'Nachrichten', 'Ort'];
$bewertungRB = "";

foreach ($namen as $nr => $name) {
    $bewertungRB .= '<p class="sternebewertung">';
    foreach ($array as $key => $value) {
        $bewertungRB .= "<input type='radio' name='" . $name . "' value='" .
            $value . "' id='stern" . $value . $nr . "'";
        if (isset($_POST[$name])) {
            if (isset($_POST[$name]) && $_POST[$name] == $value) {
                $bewertungRB .= " checked='checked'";
            }
        }
        $bewertungRB .= "> <label for='stern" . $value . $nr . "' title='" . $value
            . ($value == 1 ? ' Stern' : ' Sterne') . "'>" . $value . ($value == 1 ? 'Stern' : ' Sterne') . "</label>\n ";
    }
    $bewertungRB .= " <span id='Bewertung' title='Keine Bewertung'>
   <label><input type='radio' name='" . $name . "' value='0'>" . $name . ":</label>
  </span>";
    $bewertungRB .= '</p>' . '<div style="clear: both"><div>';
}

echo $bewertungRB;
?>

<button type="submit">Absenden</button>
</form>

</body>
</html>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<wbr> Zeilenumbruch erlauben

CSS - Listenelemente einfärben

PHP - Wochentag ausgeben

JavaScript - Anzahl der Wörter als Fortschrittsbalken anzeigen

MySQL - MySQL-Anweisung mit PHP ausgeben