Galeriebeispiele mit Einsatz von CSS3

Erfahren Sie wie Sie eine Bildergalerie mit dem Inhaltselement Galerie durch Anwendung von CSS3 optisch aufwerten und ändern können. Browser, die CSS3 nicht darstellen können, zeigen die Galerie mit den Standardwerten an.

Im ersten Beispiel werden runde Ecken und ein Schlagschatten für die Vorschaubilder erzeugt. Das zweite Beispiel zeigt eine Darstellung, bei der nur einzelne Ecken abgrundet dargestellt werden und beim Positionieren des Mauszeigers über den Vorschaubildern die Radien ausgetauscht und die Hintergrundfarbe sich ändert.

Bildergalerie mit abgerundeten Ecken und Schlagschatten

Fügen Sie dem Artikel das Inhaltselement Galerie hinzu und nehmen Sie die Einstellungen (-> siehe Screenshot) vor. Bei den Experteneinstellungen tragen Sie die CSS-Klasse css3-1 ein. Damit können Sie nun gezielt diese Galerie mit CSS beeinflussen und das Aussehen ändern.

Passen Sie die allgemeinen CSS-Definitionen wie Außen- und Innenabstand (margin, padding) entsprechend an Ihr Design an.

CSS-Definitionen für das erste Galerie-Beispiel

/* Abstand des Inhaltselements Galerie von links setzen */
#main .ce_gallery.css3-1
{
	margin:0 0 0 80px;
}

/* Aussen- und Innenabstand, abgerundete Ecken und Schlagschatten fuer den Bildcontainer */
#main .ce_gallery.css3-1 .image_container
{
	margin:0 37px 20px 0px;
	padding:10px 10px 20px 10px;
	border:1px solid #ccc;
	background:#fff;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius:8px;
	-moz-box-shadow:2px 4px 8px #999;
	/* Webkit-Browser (Safari, Chrome) */
	-webkit-border-radius:8px;
	-webkit-box-shadow:2px 4px 8px #999;
	/* allgemein CSS3*/
	border-radius:8px;
	box-shadow:2px 4px 8px #999;
}

Bildergalerie mit 2 abgerundeten Ecken, Schlagschatten und Hover-Effekt

/* Abstand des Inhaltselements Galerie von links setzen */
#main .ce_gallery.css3-2
{
	margin:0 0 0 80px;
}
/* Aussen- und Innenabstand, abgerundete Ecken, Schlagschatten und
Rollover-Farbwechsel fuer den Bildcontainer */
#main .ce_gallery.css3-2 .image_container
{
	margin:0 37px 20px 0;
	padding:10px 10px 20px;
	border:1px solid #ccc;
	background:#fff;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius-topleft: 16px;
	-moz-border-radius-bottomright: 16px;
	/* Webkit-Browser (Safari, Chrome) */
	-webkit-border-radius-topleft:16px;
	-webkit-border-radius-bottomright: 16px;
	/* allgemein CSS3 */
	border-top-left-radius: 16px;
	border-bottom-right-radius: 16px;
}
#main .ce_gallery.css3-2 .image_container:hover
{
	margin:0 37px 20px 0;
	padding:10px 10px 20px;
	border:1px solid #ccc;
	background:#efefef;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius-topright:16px;
	-moz-border-radius-bottomleft:16px;
	-moz-border-radius-topleft:0;
	-moz-border-radius-bottomright:0;
	-moz-box-shadow:2px 4px 8px #999;
	/* Webkit-Browser (Safari, Chrome) */
	-webkit-border-radius-topright: 16px;
	-webkit-border-radius-bottomleft: 16px;
	-webkit-border-radius-bottomright: 0;
	-webkit-border-radius-topleft: 0;
	-webkit-box-shadow:2px 4px 8px #999;
	/* Opera */
	border-radius: 16px;
	border-top-right-radius: 16px;
	border-bottom-left-radius: 16px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;

	/* allgemein CSS3 */
	border-radius-topleft:0;
	border-radius-bottomright:0;
	border-radius-topright:16px;
	border-radius-bottomleft:16px;
	box-shadow:2px 4px 8px #999;
}

Im Unterschied zum ersten Beispiel sind bei dieser Galerie nicht alle Ecken mit dem gleichen Radius versehen. Bei einem Überfahren mit dem Mauszeiger über ein Vorschaubild werden die Radien ausgetauscht und der Bild-Container bekommt eine andere Hintergrundfarbe zugewiesen. Bei den Experteneinstellungen tragen Sie für das zweite Beispiel die CSS-Klasse css3-2 ein. Dadurch können Sie nun gezielt diese Galerie mit CSS beeinflussen und das Aussehen ändern.

CSS-Definitionen für das zweite Galerie-Beispiel

Welche Eigenschaften von CSS3 kommen hier zum Einsatz?
Oder: ein kurzer Auflug in die CSS3-Eigenschaften border-radius und box-shadow.

Die CSS3-Eigenschaft border-radius

Für die Darstellung der abgerundeten Ecken wird die CSS3- Eigenschaft border-radius eingesetzt.

Die Eigenschaft border-radius kann in Kurzschreibweise für alle 4 Ecken mit gleichem Radius so geschrieben werden: border-radius: Wert Einheit;.
Beispiel: border-radius:10px;.

Es ist auch möglich, für jede Ecke individuelle Radien anzugeben. Die Schreibweise für 4 individuelle Radienangaben lauten:
border-bottom-left-radius: Wert Einheit;
border-bottom-right-radius:Wert Einheit;
border-top-left-radius:Wert Einheit;
border-top-right-radius:Wert Einheit;

Beispiel:
border-bottom-left-radius:8px; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:8px;
Hier sind den beiden oberen Ecken jeweils ein Radius von 8 Pixel zugewiesen; die beiden unteren Ecken bleiben eckig bzw. ohne Radius.

Für die Gecko-Browser (Firefox bis Version 4) sowie die Webkit-Browser (Safari ab 3.1 und Chrome ab 4.0) werden entsprechend die Eigenschaften spezifiziert angeben:

/* Gecko-Browser */
-moz-border-radius:8px;
/* Webkit-Browser */
-webkit-border-radius:8px;
/* CSS3 allgemein */
border-radius:8px; 

 

Die CSS3-Eigenschaft box-shadow

Der Schlagschatten wird durch die CSS3-Eigenschaft box-shadow erzeugt. Dabei gelten diese Eigenschaften:
Versatz horizontal Versatz vertikal Unschärfe Farbe

Die Schreibweise dafür lautet: box-shadow:2px 2px 8px #666;

Für die Gecko-Browser (Firefox bis Version 4) sowie die Webkit-Browser (Safari ab 3.1 und Chrome ab 4.0) werden entsprechend die Eigenschaften spezifiziert angeben:

/* Gecko-Browser */
-moz-box-shadow:2px 2px 8px #666;
/* Webkit-Browser */
-webkit-box-shadow:2px 2px 8px #666;
/* CSS3 allgemein */
box-shadow:2px 2px 8px #666; 

weiterführende Links & Informationen

twitter
rss-news-feed
weitzeldesign
planepix