Tut für diese Galerie im Polaroid Effekt!

In diesem Tutorial möchte ich euch zeigen, wie man die zwei CSS 3 Eigenschaften:
"transform: rotate" (drehen) und "box-shadow" (Kastenschatten)
in einer Bildergalerien umsetzen kann.

Zuerst erstellen wir im Kompozer zwei DIV Container.

Erster DIV Container "seite" mit diesen Anweisungen im css Editor:

margin-left:auto;
margin-right:auto;
width:400px;
margin-top:40px;

Die Breite kannst du natürlich anpassen. Das sind nur meine Angaben.

Zweiten DIV Container "galerie" mit dieser Anweisungen im css Editor:

float:left;

Im DIV Container "galerie" fügst du eine unsortierte Liste (ul) mit so vielen Listenpunkten, wie du für deine Galerie benötigst ein.

Nun fügst du deine Thumbnails (Vorschaubilder) ein und verlinkst sie mit den Original Bildern.

WICHTIG!!!

Ab hier musst du ausschließlich mit einem Text-Editor wie Notepad++ (Windows) oder Bluefish (Linux) weiterarbeiten!

Warum?
KompoZer erkennt die neuen CSS 3 Eigenschaften nicht und löscht sie deshalb aus der CSS Datei!

Damit die Bilder auch so wie im Beispiel oben aussehen, musst du noch ein paar Anweisungen vergeben.

.galerie ul{ 
        list-style: none;
}

Das muss ich nicht erklären??

Im nächsten Schritt erstellst du den Schatten erstellt der um die Bilder entstehen soll.

.galerie li a {
        float: left;
        padding: 5px 5px 15px 5px;
        background-color:#fafafa;
        border: 1px solid #fff;
        -moz-box-shadow: 0px 2px 15px #333;
        -webkit-box-shadow: 0px 2px 15px #333;
        -khtml-box-shadow: 0px 2px 15px #333;
        box-shadow: 0px 2px 15px #333;
}

Für jeden Browser musst du eine eigene Anweisung eintragen:

• moz = Mozilla/Firefox/Chrome
• webkit = Safari
• khtml = konquerer
• box-shadow = IE

Für den Box-shadow machst du 4 Angaben:

1. Abstand zum linken Rand
2. Abstand zum unteren Rand
3. Breite des Schattens
4. Farbe des Schattens

Damit die Bilder auch so übereinander liegen und rotiert dargestellt werden legst du noch eine Klasse an. Hier kann man sich überlegen ob man für jedes einzelne Bild eine eigene Klasse erstellt oder nur vier Klassen die man durchmischt in der Galerie so das es immer noch gut aussieht.

.bild-1 {
        z-index: 1;
        -webkit-transform: rotate(-10deg);
        -khtml-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -o-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
}

Der "z-index" ist für die Ebene zuständig und "transform: rotate(-10deg);" für die Rotation wobei -10deg bedeutet das die Rotation im negativen Grad Bereich ist , also nach Links geneigt ist!

Jetzt erstellst du für jedes Bild (oder nur für vier!) eine eigene Klasse mit unterschiedlichem "z-index" und verschiedenen Rotationen (Neigung).

Jetzt fehlt nur noch der hover Effekt:

.galerie li a:hover {
        z-index: 10;
        -moz-box-shadow: 3px 5px 15px #333;
        -khtml-box-shadow: 3px 5px 15px #333;
        -webkit-box-shadow: 3px 5px 15px #333;
        box-shadow: 3px 5px 15px #333;
}

Das war es.
Die Galerie ist fertig zum Gebrauch.
Beim Draufklicken öffnet sich das Original Bild in einem neuen Fenster.

Für meine Bilder Galerie habe ich zusätzlich JS(JavaSript) verwendet und zwar das Script von Lightbox 2.