Kreisförmige Elemente mit CSS 3

Man sieht sie jetzt überall im Internet, Kreise! Kreisförmige Elemente auf Webseiten sind wieder modern und werden aktuell gerne verwendet.
Wer jetzt denkt er müsse sofort Photoshop oder das Bildbarbeitungsprogramm der Wahl anwerfen um ein rechteckiges Bild in einen Kreis zu verwandeln, der täuscht sich. Seit der Einführung von CSS3 gibt es eine viel elegantere Lösung.

Kreise mit CSS3

Die Grundlage für eine der CSS-Kreis ist ein Blockelement, hier ein DIV-Container. Alles Weitere wird über CSS geregelt. Eigentlich alle HTML-Elemente haben rechteckige Grundformen, also muss man die Grundform manipulieren, um daraus einen Kreis zu machen. Für die Darstellung von Kreisen benutzt man die CSS-Eigenschaft border-radius. Grundform ist ein quadratischer div-Container, dessen border-radius auf 50% gesetzt wird

das Ergebnis sieht dann so aus

Das Zielbild ist aber eine Darstellung wie diese: Bild mit Rahmen und Label!
Dazu weist man dem div-Container eine Hintergrundgrafik zu, definiert die Breite der Aussenkante (border) und gibt ihr als Farbanweisungen einen rgba-Wert der sowohl Farbe als auch Transparenz definiert.

Damit wäre das kreisförmige Bild mit Rahmen erstellt. Jetzt fehlt nur noch das Label. Ein span-Element im div welches bei mouseover angezeigt wird hilft hier

Die komplette CSS-Anweisung sieht dann so aus

Und hier das ganze live und in Farbe

 

Alexander Schramm

 

4 Gedanken zu „Kreisförmige Elemente mit CSS 3

  1. Hallo, es würde mich interessieren, wie genau der HTML Code dazu aussieht.
    Muss zuerst noch ein rechteck-Element erstestt werden, oder reicht
    ein:

    ???

    1. Der HTML Code dazu ist recht simpel

      14.06.2016 – Fehler behoben, danke für den Hinweis.

      1. Hallo,
        der Code ist falsch. Wenn Sie obiges CSS verwenden, müssen Sie im HTML-Code „team-label“ statt „team-lable“ verwenden.
        Ebenso ist die div-class „team-circle“ falsch, richtig müsste es nur „circle“ heissen.
        Vielleicht stoßen ja nicht so versierte User auf Ihre Seite, dann kommen diese nicht weiter!

        1. Hallo George, Sie haben natürlich vollkommen recht! Vielen Dank für Ihren Hinweis, ich habe die Fehler behoben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.