Bilder mit abgerundeten Ecken in Contao verwenden

Für gestalterische Akzente lassen sich auch Bilder mit abgerundeten Ecken oder auch kreisförmige, optisch runde Bilder verwenden - vorausgesetzt, das die Bilder als Hintergrundbilder innerhalb eines Elements über die CSS-Eigenschaft border-radius eingebunden werden.

Wie lassen sich nun optisch runde Bilder realisieren?
Zunächst wird ein Layer mit einer CSS-Klasse angelegt; hier im Beispiel für die ersten beiden Bilder die CSS-Klassen image und image-2. Damit die Bilder optisch kreisförmig dargestellt werden, wird der Wert der CSS-Eigenschaft border-radius auf die Hälfte der definierten Breite und Höhe des Layers gesetzt.

In diesem Beispiel ist die CSS-Klasse image mit einer Breite und Höhe von 400 Pixel definiert -> der Wert für border-radius wird somit auf 200 Pixel gesetzt.

DIV anlegen 1. Bild (Inhaltselement HTML)

<div class="image"></div>

DIV anlegen 2. Bild (Inhaltselement HTML)

<div class="image-2"></div>
<div class="clear"></div>

Im Code für das zweite Bild wird zusätzlich die Klasse clear eingefügt; diese sorgt dafür, dass weitere, nach dem zweiten Bild eingefügte Inhalte nicht neben, sondern unter den beiden Bildern angezeigt wird. Die CSS-Definitionen sind in der Datei contao.css verwendet, die das CSS-Framework von Contao bereits mitliefert.

CSS-Definitionen für Bild 1 und Bild 2

/* Style sheet rounded-images */
/* Bild 1 */
.image
{
	width:400px;
	height:400px;
	float:left;
	margin:20px 0 0 80px;
	border:1px solid #999;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius: 200px;
	/* Webkit-Browser (Chrome, Safari) */
	-webkit-border-radius: 200px;
	/* CSS3 allgemein */
	border-radius: 200px;
	background:transparent url("tl_files/runde-bilder/JU-52_001.jpg") no-repeat 0 0;
}

/* Bild 2 */
.image-2
{
	width:300px;
	height:300px;
	float:left;
	margin:50px 0 30px 20px;
	border:1px solid #999;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius: 150px;
	/* webkit-Browser (Chrome, safari) */
	-webkit-border-radius: 150px;
	/* CSS3 allgemein */
	border-radius: 150px;
	background:transparent url("tl_files/runde-bilder/JU-52_006.jpg") no-repeat 0 0;
}

Beispiel für abgerundete Ecken

Wird der Radius kleiner als die Elementbreite gewählt, ergeben sich abgerundete Ecken – zwei Beispiele nachfolgend dargestellt.

CSS-Definitionen für Bild 3 und Bild 4

/* Style sheet rounded-images */
/* Bild 3 */
.image-3
{
	width:400px;
	height:400px;
	float:left;
	margin:20px 0 0 80px;
	border:1px solid #999;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius: 150px;
	/* Webkit-Browser (Chrome, Safari) */
	-webkit-border-radius: 150px;
	/* CSS3 allgemein */
	border-radius: 150px;
	background:transparent url("tl_files/runde-bilder/JU-52_001.jpg") no-repeat 0 0;
}

/* Bild 4 */
.image-4
{
	width:300px;
	height:300px;
	float:left;
	margin:50px 0 30px 20px;
	border:1px solid #999;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius: 50px;
	/* webkit-Browser (Chrome, safari) */
	-webkit-border-radius: 50px;
	/* CSS3 allgemein */
	border-radius: 50px;
	background:transparent url("tl_files/runde-bilder/JU-52_006.jpg") no-repeat 0 0;
}

Abgerundetes Bild mit Schatten und Hover-Status

Auch bei den optisch runden Bilder lässt sich die CSS-Eigenschaft box-shadow anwenden und sorgt dafür, das der Schatten auch kreisförmig abgebildet wird, obwohl das Ausgangsbild nach wie vor rechteckig ist.

CSS-Definitionen für Bild mit Schatten

/* Abgerundetes Bild mit Schlagschatten */

.image-2-hover
{
	width:300px;
	height:300px;
	float:left;
	margin:20px 0 30px 80px;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius: 150px;
	-moz-box-shadow:4px 4px 12px #666;
	/* Webkit-Browser (Chrome, Safari) */
	-webkit-border-radius: 150px;
	-webkit-box-shadow:4px 4px 12px #666;
	/* CSS3 allgemein */
	border-radius: 150px;
	box-shadow:4px 4px 12px #666;
	background:transparent url("tl_files/runde-bilder/JU-52_006.jpg") no-repeat 0 0;
}

CSS-Definitionen für Bild mit Hover-Status

/* Abgerundetes Bild mit Hover-Status */
/* Normalzustand */
.image-2-hover
{
	width:300px;
	height:300px;
	float:left;
	margin:20px 0 30px 80px;
	border:2px solid #666;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius: 150px;
	/* Webkit-Browser (Chrome, Safari) */
	-webkit-border-radius: 150px;
	/* CSS3 allgemein */
	border-radius: 150px;
	background:transparent url("tl_files/runde-bilder/JU-52_006.jpg") no-repeat 0 0;
}

/* Hover-Zustand - Focus-Zustand */
.image-2-hover:hover,
.image-2-hover:focus
{
	border:2px solid #f30;
}

Hinweis:
Alle Browser, die die CSS3-Eigenschaft border-radius unterstützen, zeigen die Bilder rund oder mit abgerundeten Ecken; alle anderen Browser zeigen die Bilder in ihren originären Proportionen, also rechteckig, an.

Weiterführende Links

Internet Explorer 6 bis 8 mit CSS3-Eigenschaft border-radius nachrüsten
http://fetchak.com/ie-css3

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser