Auf der Suche nach einer Bildergalerie für deine Webseite? Dann hab ich hier vielleicht das was du suchst. Ich zeige hier Schritt für Schritt, wie ihr eine ansprechende Bildergalerie mit jeder Menge CSS3-Schnickschnack erstellen könnt. So werden wir folgende CSS3-Eigenschaften nutzen:

• transitions
• transform
• border-radius
• box-shadow
• Pseudoklassen

Habt ihr Lust?

Grundeinstellungen für Galerie und Bilder

Zunächst wollen wir einige Grundeinstellungen für die Galerie und Bilder festlegen. Wir werden die Galerie später als Div-Container in unsere Webseite einbinden. Daher müssen wir einige Dinge vorab definieren.

#galerie {
/* Hintergrundfarbe */
background:#ffffff;
/* Runde Ecken */
-moz-border-radius:10px;
border-radius:10px;
/* Innenabstand */
padding:20px;
/* Breite */
width:700px;
/* Außenabstand */
margin:20px auto;
}

Die Bilder werden wir als img einbinden. Auch hier ein paar grundlegende Dinge:

#galerie img {
/* Hintergrundfarbe der Bilder */
background:#ffffff;
/* Breite der Bilder */
width:150px;
/* Außenabstand */
margin:15px 10px;
}

Polaroid-Fotos

Wie wär’s mit Bildern im typischen Polaroid-Stil? Dazu ändern wir einfach den Innenabstand:

padding:10px 10px 50px 10px;

Schlagschatten für die Bilder

Die Bilder sollen sich mit einem dezentem Schlagschatten vom Hintergrund abheben:

-moz-box-shadow: 0 0 5px 2px #ccc;
-webkit-box-shadow: 0 0 5px 2px #ccc;
box-shadow: 0 0 5px 2px #ccc;

Drehung der Bilder

Um der Galerie ein wenig Pepp zu geben, wollen wir die Bilder gedreht anzeigen, sagen wir mit einer Linksdrehung von 2 Grad.

-webkit-transform: rotate(-2deg);  /* Saf3.1+, Chrome */
-moz-transform: rotate(-2deg);  /* FF3.5+ */
-o-transform: rotate(-2deg);  /* Opera */
transform: rotate(-2deg);

Alle Bilder im gleichen Winkel ist langweilig, oder? Wie wäre es, wenn jedes zweite Bild um 2 Grad nach rechts gedreht wäre?

#galerie img:nth-child(2n) {
-webkit-transform: rotate(2deg);  /* Saf3.1+, Chrome */
-moz-transform: rotate(2deg);  /* FF3.5+ */
-o-transform: rotate(2deg);  /* Opera */
transform: rotate(2deg);
}

Dies erreichen wir mit dem Pseudo-Selektor :nth-child. In Klammern dahinter wird angegeben, welches Child-Element betroffen ist, in diesem Fall jedes zweite.

Bilder vergrößern

Wenn die Maus über das Bild fährt, wollen wird das Bild skalieren. Für dieses Beispiel nehme ich den Faktor 5. Gleichzeitig soll das vergrößerte Bild gerade, also im Winkel von 0 Grad angezeigt werden.

#galerie img:hover {
-webkit-transform: rotate(0deg) scale(5);  /* Saf3.1+, Chrome */
-moz-transform: rotate(0deg) scale(5);  /* FF3.5+ */
-o-transform: rotate(0deg) scale(5);  /* Opera */
transform: rotate(0deg) scale(5);
}

Noch ein paar i-Tüpfelchen

Zum Schluss wollen wir unserer Galerie noch ein wenig Pfiff geben. Wer mag kann die Bilder in der Standardanzeige leicht transparent erscheinen lassen. Ich nehme hier mal einen Wert von 80%:

#galerie img {
opacity:0.8;
}

Die Transparenz soll bei :hover entfallen. Außerdem soll der Polariod-Stil wegfallen und das Bild rahmenlos angezeigt werden. Zusätzlich wollen wir den Schlagschatten nach rechts unten versetzen.

#galerie img:hover {
opacity:1;
padding:0;
-moz-box-shadow: 2px 2px 2px #888;
-webkit-box-shadow: 2px 2px 2px #888;
box-shadow: 2px 2px 2px #888;
/* Bild soll im Vordergrund angezeigt werden, daher */
position:relative;
z-index:1;
}

Haben wir noch was vergessen? Richtig. Die Effekte sehen so ziemlich abgehackt aus. Muss ja nicht sein. Wir wollen das animieren, mit dem Befehl transition:

#galerie img {
-webkit-transition: all 0.4s ease-out;	/* Saf3.1+, Chrome */
-moz-transition: all 0.4s ease-out;	/* FF3.5+ */
-o-transition: all 0.4s ease-out;	/* Opera */
transition: all 0.4s ease-out;
}

All together now…

Und hier der Code nochmal zusammengefasst.

#galerie {
background:#ffffff;
-moz-border-radius:10px;
border-radius:10px;
padding:20px;
width:700px;
margin:20px auto;
}

#galerie img {
background:#ffffff;
width:150px;
margin:15px 10px;
padding:10px 10px 50px 10px;
opacity:0.8;
-moz-box-shadow: 0 0 5px 2px #ccc;
-webkit-box-shadow: 0 0 5px 2px #ccc;
box-shadow: 0 0 5px 2px #ccc;
-webkit-transform: rotate(-2deg);  /* Saf3.1+, Chrome */
-moz-transform: rotate(-2deg);  /* FF3.5+ */
-o-transform: rotate(-2deg);  /* Opera */
transform: rotate(-2deg);
-webkit-transition: all 0.4s ease-out;	/* Saf3.1+, Chrome */
-moz-transition: all 0.4s ease-out;	/* FF3.5+ */
-o-transition: all 0.4s ease-out;	/* Opera */
transition: all 0.4s ease-out;
}

#galerie img:nth-child(2n) {
-webkit-transform: rotate(2deg);  /* Saf3.1+, Chrome */
-moz-transform: rotate(2deg);  /* FF3.5+ */
-o-transform: rotate(2deg);  /* Opera */
transform: rotate(2deg);
}

#galerie img:hover {
opacity:1;
padding:0;
position:relative;
z-index:1;
-moz-box-shadow: 2px 2px 2px #888;
-webkit-box-shadow: 2px 2px 2px #888;
box-shadow: 2px 2px 2px #888;
-webkit-transform: rotate(0deg) scale(5);  /* Saf3.1+, Chrome */
-moz-transform: rotate(0deg) scale(5);  /* FF3.5+ */
-o-transform: rotate(0deg) scale(5);  /* Opera */
transform: rotate(0deg) scale(5);
}

Copy&Paste-Faule laden sich den Code hier herunter:

Einbinden der Bilder

Wie bindet ihr die Galerie nun in eure Webseite ein? Ganz einfach:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
...
<div id="galerie">
<img src="/images/galerie/bild1.jpg" alt="" />
<img src="/images/galerie/bild2.jpg" alt="" />
<img src="/images/galerie/bild3.jpg" alt="" />
...
</div>
...
</body>
</html>

Und so sieht das Ergebnis aus

Noch eine kleine Abwandlung

Im gezeigten Beispiel werden die Bilder bei :hover vergrößert, also wenn wir mit der Maus auf dem Bild bleiben. Nun kann “transition” aber auch andere Pseudo-Klassen bedienen. Wie wäre es zum Beispiel mit :active? Damit wird das Bild nur solange vergrößert, wie wir es mit der linken Maustaste anklicken.

So sieht der Code aus:

#galerie img:active {
opacity:1;
padding:0;
position:relative;
z-index:1;
-moz-box-shadow: 2px 2px 2px #888;
-webkit-box-shadow: 2px 2px 2px #888;
box-shadow: 2px 2px 2px #888;
-webkit-transform: rotate(0deg) scale(5);  /* Saf3.1+, Chrome */
-moz-transform: rotate(0deg) scale(5);  /* FF3.5+ */
-o-transform: rotate(0deg) scale(5);  /* Opera */
transform: rotate(0deg) scale(5);
}

und so die Galerie:

Gefällt’s euch?

Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite: