Wie man mit CSS eine Bewertung mit Sternen anzeigt

Thursday, 20. April, 2006

Jeder im Internet kennt diese Bewertungssterne. Das sind diese kleinen Sterne, die die Bewertung eines Objekts anzeigen. Je mehr Sterne, desto besser. Typischerweise haben diese eine Skala von 0 bis 5 und meistens werden nur ganze oder halbe Sterne angezeigt.

In diesem Tutorial besprechen wir, wie man mit CSS diese Sterne auf eine sehr elegante Art und Weise anzeigen lassen kann. Man kann sogar jede Bewertung sehr klar zeigen, so dass man eine Bewertung von 3,8 von einer Bewertung von 4,2 sehr gut unterscheiden kann.

Das 5 Sterne Bewertungssystem

Zuerst einmal schauen wir uns dieses System näher an. Schaue Dir dazu die Snapshots in der BunteSuppe Gallery an. Jedes Bild hat unterhalb Sterne, die die Bewertung des Bildes angeben. Wenn Du genau hinschaust, dann kannst Du auch Viertel-Sterne sehen oder neun-Zehntel eines Sterns.

Natürlich kann es sein, dass gerade alle Bewertungen genau ganze Sterne haben. Wenn das so ist, dann klicke auf “mehr”, um mehr Snapshots zu sehen oder schaue Dir dieses Beispiel an:

Wie das funktioniert

Die Sterne bestehen aus nur zwei Bildern. Ein kräftig leuchtender Stern: , und ein blasser Stern: .

Das HTML für diese Sterne ist sehr einfach – ein DIV ist in einem anderen DIV:

<div class="rating_bar">
  <div style="width:51%"></div>
</div>

Das Style Attribut für das innere DIV bestimmt wieviele Sterne angezeigt werden. Eine Bewertung von 100% entspricht 5 ganzen Sternen. Eine Bewertung von 40% entspricht 2 Sternen und eine Bewertung von 42% entspricht ein bisschen mehr als 2 Sternen, etc.

Wir verwenden für das äußere DIV eine CSS Klasse. Das geht so:

.rating_bar {
  width: 55px;
  background: url(/img/star_x_grey.gif) 0 0 repeat-x;
}

.rating_bar div {
  height: 12px;
  background: url(/img/star_x_orange.gif) 0 0 repeat-x;
}

Das erste Regelset wird für das äußere DIV eingesetzt. Es definiert die Breite für das gesamte Set der Sterne. Die Breite bestimmt, wieviele Sterne sichtbar sein werden. In unserem Fall haben wir Sterne die 11 Pixel breit sind und da wir 5 Sterne wollen, ist es also 55 Pixel breit. Das Bild der blassen Sterne wird als Hintergrundbild verwendet.

Das zweite Regelset wird für das innere DIV eingesetzt. Es muss so hoch sein, wie die Höhe der Sterne. Die kräftig leuchtenden Sterne werden als Hintergrundbild verwendet.

Das zusammen kombiniert, ergibt unser Beispiel:

Du kannst Dir das wie zwei in einander geschlichtete Schachteln vorstellen. Die untere Box ist mit den blassen Sternen gefüllt und braucht die gesamte Breite. Die obere Box beinhaltet die leuchtenden Sterne und seine Breite zeigt die Bewertung an. Hier ist nochmals unser Beispiel, diesmal mit farbigen Border, damit man die Ränder der Schachteln besser sieht:

Ganz einfach, gell?

Erweiterung des Systems, um Bewertungsbalken anzeigen zu lassen

Du kannst dieses System mit vielen verschiedenen Bildern verwenden. Ein anderes gutes Bild ist ein bunter Balken. Du kannst dies und dies verwenden, um das zu kreieren:

Diese Methode hat gegenüber den Sternen den Vorteil, dass der gesamte Balken jede Breite haben kann. Es muss also nicht die exakte Breite der 5 Sterne oder so haben.

Ein noch hübscherer Balken

Du kannst dem Balken auch runde Enden geben:

Für das brauchst Du ein zusätzliches Bild:

…und ein zusätzliches inneres DIV:

<div class="rating_bar">
  <div style="width:52%">
    <div></div>
  </div>
</div>

…und zusätzliches CSS:

.rating_bar div div {
  background: url(/img/rating_bar_tip.gif) right 0 no-repeat;
}

Das erscheint kompliziert, warum sollte ich das wollen?

Es gibt ein paar Alternativen zu diesem System. Du könntest ein IMG Element für jeden Stern anzeigen lassen und berechnen, wieviele leuchtende und wieviele blasse Sterne Du brauchst. Das bedeutet aber, dass Du mehr HTML verwenden musst (und Deine Besucher müssen mehr downloaden). Außerdem kannst Du nur ganze Sterne und vielleicht halbe Sterne anzeigen lassen.

Eine andere Methode wäre, dass Du eine Menge verschiedener Bilder machst – eines für jede mögliche Kombination der Sterne. Das ergäbe weniger HTML, aber mehr Bilder zum Downloaden für Deine Besucher. Und Du bist beschränkt durch die Anzahl der verschiedenen Möglichkeiten, zu denen Du Lust hast, sie Dir auszudenken und zu machen.

Aber ich will gar keine zwei-Fünftel Sterne

Du könntest Dich entscheiden, nur ganze oder halbe Sterne anzeigen zu lassen. Das ist ganz einfach zu erreichen, indem Du die prozentuelle Breite des Balkens rundest. Wenn Du nur ganze Sterne zeigen willst, dann runde die Prozent zu den nächsten 20%. Diese Methode hat gegenüber den anderen Alternativen immer noch den Vorteil, dass es weniger HTML benötigt.

Jetzt geh und bewerte was das Zeug hält

Bevor Du jetzt sofort los rennst, um Deine eigenen Balken und Sterne zu machen, schau noch mal bei unserer BunteSuppe Gallery vorbei und bewerte ein paar der tollen Kunstwerke. Wenn Du Glück hast, siehst Du vielleicht, wie die Sterne aufgrund Deiner Bewertung ihre Breite ändern.