Miniaturbildgalerien sind eine der häufigsten Lösungen im Internet, um mehrere Bilder zu präsentieren. Die Effizienz dieses Tools ist unschlagbar, es ermöglicht ein schnelles Browsen und eine genauere Prüfung, wenn dies gewünscht wird.
Wenn ich eine Miniaturbild-Galerie baue, schaue ich gerne im Internet nach, was andere Designer tun, um ihre Einzigartigkeit zu erreichen. Heute haben wir fünfzig großartige Galerien für Sie zusammengestellt. Auf dem Weg diskutieren wir auch einige Ideen, die Sie in Ihren eigenen Galerien verwenden können.
Wie der Artikel? Abonnieren Sie unseren RSS-Feed und folgen Sie uns auf Twitter, um immer auf dem neuesten Stand zu bleiben.
Löse die Ränder ab
Whoa sagt, Thumbnails müssen ausgebreitet werden? Diese Seiten beschlossen, Nähe zu umarmen und die Bilder gegeneinander zu zerquetschen. Das Ergebnis ist der Eindruck eines einzelnen Objekts, das aus vielen Teilen besteht. Das ist nicht nur sehr platzsparend, sondern auch sehr attraktiv.
Diese Technik ist natürlich am besten zu verwenden, wenn Sie nicht zu jedem Bild viele kontextbezogene Informationen hinzufügen müssen, obwohl das Hover-Ereignis eine gute Gelegenheit für zusätzlichen Text oder Grafiken bietet.
Shankar

Egopop

Freie Gesichter

Analog Digital

Elliot Leprakranke

xMind

Variieren Sie die vertikale Höhe
Wenn Sie die vertikale Höhe der Bilder in der Galerie variieren, entsteht eine viel organischere Seite. Obwohl das immer noch durch einheitliche Regeln geregelt wird, fühlt sich das Layout nicht so starr an wie bei einem typischen Raster.
Dies ist natürlich die perfekte Lösung für die Anzeige von Bildern, die zufällig unterschiedliche Höhen haben. Sie sollte jedoch auch berücksichtigt werden, wenn das gesamte Seitenthema entspannt oder frei fließend ist.
404 Nicht gefunden

Paul Mitchell Kelly

Nur Sean

Vertikale Maserung

Sei nicht quadratisch
Plätze sind langweilig! Wenn Sie möchten, dass Ihre Galerie die Form zerstört, experimentieren Sie mit verschiedenen Formen für die Miniaturansichten. Die typische zweite Option sind Kreise, wie Sie unten sehen werden, aber wie das erste Beispiel zeigt, ist es definitiv effektiv, noch weiter zu gehen und etwas Eigenes zu tun.
Arnaud Beelen

Sellected

Im Fokus der Aufmerksamkeit

Leidenschaft über Design

Keenan Wells

Krumme Bilder
CSS3 macht es einfach, viele großartige visuelle Effekte zu erstellen. Eine in letzter Zeit beliebte Bildbearbeitung war die Verwendung von CSS-Transformationen, um die Bilder in einer Galerie zu drehen. Ein Effekt, der häufig mit einer Animation im Schwebeflug verbunden wird.
Das Ergebnis sieht aus wie Bilder, die schief an der Wand hängen oder Polaroids, die auf einem Tisch ausgebreitet sind. Hier sind einige Variationen des Effekts.
Mooreish

Pleite Design

In der Scheune geboren

Schattenspiele
CSS-Box-Schatten sind relativ einfach zu handhaben. Stellen Sie einfach Ihre Position und Federn ein und Sie können loslegen. Viele Entwickler haben jedoch kürzlich entdeckt, dass durch die Kombination von Schatten mit Transformationen und Pseudo-Selektoren eine Unmenge an unterschiedlichen und beeindruckenden Ergebnissen erzielt werden kann.
Die Schatten, die Sie auf Ihre Galerie anwenden, können das Gesamtgefühl Ihrer gesamten Seite ändern. Überprüfen Sie die Schatten unten und wie sie die Illusion vermitteln, das Bild tatsächlich neu zu gestalten.
CMYK08

Signatur-Creative

Bronco

Calabriae Studio

Chase Farnum

Dribbble

Atelier

Andere inspirierende Galerien
Toni Digrigio

Andrea Ives

Wir sind meistens ernst

Schwarze Krawatte

Ben Bate

Andre Kreft

Leeds Grafikdesigner

Anderson de Paulo

Barnt & Arnst

James White Smith

Ketch Studio

Wer ist Gast?

Medienregen

Chris Arbini

Sumit Paul

Farbe gefunden

Hoban-Karten

Teilt

Ein Punkt Hella

Kubi Media

Kubanischer Rat

Elegante Möwen

Froot

Arts Code

Mathieu Clauss

Zeig uns Deine!
Nun, da Sie unsere Sammlung einiger der interessantesten Galerien in der Umgebung gesehen haben, können Sie jetzt teilen. Hinterlassen Sie einen Kommentar mit einem Link zu allen Galerien, die Sie entweder erstellt oder einfach nur inspirierend gefunden haben.