Auf sehr vielen Webseiten werden Elemente wie zum Beispiel Bilder als Rechtecke dargestellt. Um aus der Masse hervorzustechen und den Besucher zu überraschen, kann man Bilder auch als Kreise darstellen lassen, ohne auf Hilfsmittel wie Grafikprogramme zurück zu greifen.
Grundlagen für Runde Bilder in CSS3
Um überhaupt Bilder als Kreise darstellen zu können, sollte das Bild zwei Bedingungen erfüllen.
- Es sollte quadratisch sein
- Der wichtige Inhalt des Bildes sollte in der Mitte sein
Nur dann wirkt das runde Bild. Ansonsten wären wichtige Elemente des Bildes abgeschnitten.
Der CSS Befehl
Um nun das Bild rund darzustellen, benötigen wir die Eigenschaft Border Radius.
.rund { border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; }
Gibt man nun einen beliebigen Element die CSS Klasse „rund“ mit, wird des automatisch rund dargestellt. Welche Browser diese Eigenschaft unterstützen, kann man sehr gut auf Caniuse.com nachlesen. Um ältere Browser ebenfalls noch zu unterstützen, sollte man auf die Vendor Prefixe -moz und -webkit zurück greifen. Damit hat man die meisten Browser wirklich abgedeckt und kann diese Lösung nutzen.
Vorteile der CSS Lösung:
Diese Lösung hat gegenüber einer reinen grafischen Lösung mehrere Vorteile: Der Hintergrund des runden Elementes ist transparent. Wenn dieses Element nun auf einen Verlauf liegt, so wird dieser automatisch dargestellt und man muss diesen nicht mit einen Grafikprogramm nachbearbeiten.
Natürlich kann man das Runde Bild auch als .png abspeichern, jedoch ist man dann nicht mehr flexibel. Möchte man nun dem Bild einen Rahmen geben, so muss man diesen dann wieder per Grafikprogramm ändern. Möchte man die Rahmenfarbe bei einem Mouse Over Effekt dabei ändern, muss das komplette Bild ausgetauscht werden.
Man kann zusammengefasst sagen, dass diese Lösung die Wartung und die Erweiterung einer Webseite erheblich vereinfacht.
Ein weiterer Vorteil bei dieser Lösung ist, dass man auf eine .jpg Datei zurückgreifen kann. Diese ist meistens kleiner als die .png und somit schneller in mobilen Netz geladen. Und eine schnellere Ladezeit ist ebenfalls ein gutes Signal für Google.
Runde Ecken mit CSS3:
Natürlich kann man mit diesem Befehl nicht nur Bilder Rund darstellen. Auch kann man von einer DIV Box die Ecken Rund gestalten, so dass man eine schöne Reiternavigation darstellen kann. Musste man früher noch auf Hintergrundbilder zurückgreifen, geht dies heute mit der CSS Eigenschaft Border Radius.
Im Beispiel oben haben wir alle vier Ecken des Elements gleichzeit angesprochen. Natürlich kann man auch jede Ecke einzeln ansprechen:
Die Reihenfolge ist:
- oben links
- oben rechts
- unten rechts
- unten links
Möchte man also nur die Ecke Oben Links und unten Rechts rund machen, funktioniert folgender Befehl:
border-radius: 20px 0px 20px 0px; -moz-border-radius: 20px 0px 20px 0px; -webkit-border-radius: 20px 0px 20px 0px;
Mit diesem Beispiel haben die beiden Ecken einen Radius von 20px.
Beispiel auf Codepen:
See the Pen Runde Bilder (Elemente) in CSS3 by Marcel Stermann (@der-internetblog) on CodePen.