| (Kommentare: 1)

Webdesign Lohmann | modern webdesign - Polaroid Foto Galerie mit CSS3 erstellen

Magische Dinge können durch die Kombination verschiedener CSS-Eigenschaften, besonders wenn einige der neuen CSS3 Tricks verwendet werden, durchgeführt werden. Werfen wir einen Blick auf den Aufbau einer Polaroid Foto Galerie mit reinem CSS.

Schauen Sie sich das Demo an.

Information

Bitte bedenken Sie, durch den Einsatz der CSS3-Eigenschaften, werden die Nutzer des IE die Effekte nicht sehen. Browser die CSS3 voll unterstützen, wie Firefox, Safari und Google Chrome werden in den Genuss des gesamten CSS3-Erlebnisses kommen.

Wir werden grundlegende CSS-Stile verwenden, bis die Fotos in einem Polaroid-Stil erscheinen. Dann werden einige zusätzliche Stylings mit Schatten und Rotation vorgenommen. Um den Stapeleffekt zu erhalten, wird die z-index-Eigenschaft angewendet, um alle Objekte zu ändern.

Als erstes wird die Grundstruktur der Seite angelegt und ein Container auf der Seite zentriert. Als Hintergrundbild wird eine, sich wiederholende, Holzstruktur hinzugefügt.

body {
	background: #959796 url(../gfx/wood-repeat.jpg);
}

#container {
	width: 600px; 
	margin: 40px auto;
}

Semantisch liegt die Sammlung der Bildern in einem ungeordnetem Listen-Element, jedes Bild mit einem klickbaren Link versehen und eine passende Beschreibung zu jedem Bild hinzugefügt.

<ul class="gallery">
	<li><a href="#"><img src="gfx/1.jpg" alt="Photograph of a waterfall" /></a></li>
	<li><a href="#"><img src="gfx/2.jpg" alt="Photograph of clouds and sunlight" /></a></li>
	<li><a href="#"><img src="gfx/3.jpg" alt="Photograph of a lake scene at dusk" /></a></li>
	<li><a href="#"><img src="gfx/4.jpg" alt="Photograph of a tree and green grass" /></a></li>
	<li><a href="#"><img src="gfx/5.jpg" alt="Photograph of a beach sunset" /></a></li>
	<li><a href="#"><img src="gfx/6.jpg" alt="Photograph of a flower and lake" /></a></li>
</ul>

Nun beginnen wir mit den Arbeiten an dem CSS-Stil der Galerie. Erstens, wir entfernen die Standard-Punkt-Grafik des Listenelements mit list-style: none.

Webdesign Lohmann | modern webdesign - Polaroid Foto Galerie mit CSS3 erstellen

Geben Sie den Bildern den typischen Polaroid-Effekt, indem Sie ein paar Stile auf die Verweise(<a>) anwenden. Erstens float sie nach links, um den Stapel nebeneinander auszurichten, dann fügen Sie ein Padding hinzu. Durch setzen eines hellgrauen Hintergrundes erhalten Sie die traditionelle Polaroid-Form. Beenden Sie dieses mit einem sehr subtilen Highlight in Form eines weißen Randes von 1px.

ul.gallery li a {
	float: left;
	padding: 10px 10px 25px 10px;
	background: #eee;
	border: 1px solid #fff;
}
Webdesign Lohmann | modern webdesign - Polaroid Foto Galerie mit CSS3 erstellen

Unter der Nutzung der CSS3-Eigenschaft box-shadow, fügen wir die Schattierungen zu den Fotos hinzu. Um die Stapelfolge später sicherzustellen, fügen wir noch position:relative; hinzu.

ul.gallery li a {
	float: left;
	padding: 10px 10px 25px 10px;
	background: #eee;
	border: 1px solid #fff;
	-webkit-box-shadow: 0px 2px 15px  #333333;
	-moz-box-shadow: 0px 2px 15px #333333;
	box-shadow: 0px 2px 15px #333333;
	position: relative;
}

Nun fügen wir jedem Bild einen Verweis(<a>) hinzu und weisen diesem einen eindeutigen Klassennamen zu.

<ul class="gallery">  
  <li><a href="#" class="pic-1"><img src="gfx/1.jpg" alt="Photograph of a waterfall" /></a></li>
  <li><a href="#" class="pic-2"><img src="gfx/2.jpg" alt="Photograph of clouds and sunlight" /></a></li>
  <li><a href="#" class="pic-3"><img src="gfx/3.jpg" alt="Photograph of a lake scene at dusk" /></a></li>
  <li><a href="#" class="pic-4"><img src="gfx/4.jpg" alt="Photograph of a tree and green grass" /></a></li>
  <li><a href="#" class="pic-5"><img src="gfx/5.jpg" alt="Photograph of a beach sunset" /></a></li>
  <li><a href="#" class="pic-6"><img src="gfx/6.jpg" alt="Photograph of a flower and lake" /></a></li>
</ul>

Sind nun die eindeutigen Klassennamen vergeben, können wir jedem Foto seinen eigenen Style zuweisen.

ul.gallery li a.pic-1 {
	z-index: 1;
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
}

ul.gallery li a.pic-2 {
	z-index: 5;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
}

ul.gallery li a.pic-3 {
	z-index: 3;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
}

Der Stapel der Polaroid-Fotos sollte nun zufällig übereinander auf der Holzoberfläche liegen.

Webdesign Lohmann | modern webdesign - Polaroid Foto Galerie mit CSS3 erstellen

Zum Schluss erhöhen wie noch die z-index-Eigenschaft des :hover Zustandes des Verweises(<a>), um sicherzustellen das bei MouseOver, dass ausgewählt Bild an die oberste Position springt. Jetzt regulieren wir den Schatten-Effekt, damit der Eindruck entsteht, dass das Foto vom Stapel etwas abgehoben ist.

ul.gallery li a:hover {
	z-index: 10;
	-webkit-box-shadow: 3px 5px 15px  #333333;
	-moz-box-shadow: 3px 5px 15px #333333;
	box-shadow: 3px 5px 15px #333333;
}

Das ist alles! Sie könnten noch einen Schritt weitergehen und die Fotos mit einem Javascript-Lightbox-Effekt auf Ihrer Webseite verwenden.


Kommentare lesen

Martin Koch

Ein sehr schönes und hilfreiches Tutorial, dazu noch sehr gut und ausführlich erklärt. Hat mich auf sehr viele Ideen zur Gestaltung eines Hovereffektes gebracht.

Vielen Dank.

Michael Lohmann

Danke


Einen Kommentar schreiben

Bitte addieren Sie 7 und 2.

Zurück