WEBDESIGN

Runde Kreisbilder mit CSS3

Bilder die in in einem Kreis dargestellt werden passen manchmal besser zu einem Design, als normale, eckige. Heute schauen wir uns an, wie man dieses Designelement ganz ohne Photoshop, sondern rein mit CSS3 umsetzen kann.


Bild von zoutedrop

Zunächst brauchen wir ein HTML Container der das Bild enthält. Dazu wird das gewünschte Bild per CSS als Hintergrundgrafik des Containers eingebunden. Es wäre auch möglich, mit einem Image-Element und der Eigenschaft overflow:hidden zu arbeiten (dazu später mehr).

Der HTML Part

Das HTML Gerüst ist ziemlich simpel, denn es besteht nur aus einem einzigen Element bzw. 2 Elementen, je nachdem welche Technik man verwendet.

Bild als Hintergrundgrafik

<div class="circular"></div>

Bild als Image-Element

<div class="circular">
    <img src="http://farm3.staticflickr.com/2694/4116996137_7722212f15.jpg">
</div>

Wenn man die Variante mit Image-Element verwendet, kann es vorkommen, dass der Übergang zwischen Bild und Kreis nicht sauber dargestellt wird. Bevor man sich also für eine Variante entscheidet, sollte man beide testen und prüfen, ob man mit dem Ergebnis zufrieden ist.

Der CSS Part

Zunächst wird eine Klasse erstellt, die dafür sorgt, dass der Wrapper-Container ein Kreis ist. Hier kann man nach Belieben verschiedene Effekte wie Schatten oder Rahmen hinzufügen. Wenn man Animationen oder Mouseover-Effekte hinzufügen will, kann man z.B. auf transitions zurückgreifen.

.circular {
	width: 300px;
	height: 300px;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
        overflow:hidden; /* Für Image-Element Variante */
}

Für größere Kreise, muss entsprechend die Höhe und Breite angepasst werden. Damit ein Kreis entsteht, muss die broder-radius immer der Hälfte der Höhe und Breite sein.

Für die Hintergrundbilder kann man nun entsprechend jeweils eigene Klassen definieren.

.bird {
   background: url('http://farm3.staticflickr.com/2694/4116996137_7722212f15.jpg') no-repeat;
}

Um das Bild dann auf der Website anzuzeigen, muss dem Kreiscontainer nur noch die Klasse bird hinzugefügt werden.

<div class="circular bird"></div>


Kommentare ( 2 Kommentare )

  • Michael Antworten ↓

    Hallo,
    wenn ich das richtig verstanden habe, muss man hierfür einfach in den HTML Body den Code von "Bild als Image Element" einfügen und eine CSS Datei mit dem Inhalt .circular ff. erstellen? Jedenfalls habe ich es so gemacht. Leider klappt es nicht! Über Hilfe würde ich mich sehr freuen, ein schöner Beitrag!

  • Conny Antworten ↓

    Ganz herzlichen Dank für diese funktionale Lösung (und so einfach...) :-)

Schreib einen Kommentar