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

<sub> Physische Auszeichnung

CSS - Pink-Cube-Animation

PHP - IP und Host ausgeben

JavaScript - Darstellungsmodus überprüfen

MySQL - Benutzer ausgeben die min. 25 Tage registriert sind

Gesamter Inhalt zentriert
Vor allem Anfänger machen oft den Fehler die gesamte Webseite "auf die Mittelachse zu schrauben". Zentrierten Text sollte man verwenden, wenn man etwas hervorheben möchte, für längere Textpassagen ist er denkbar ungeeignet, weil er sehr schlecht lesbar ist. Eine Seite, auf der alles zentriert ist, macht einen unprofessionellen Eindruck.