Von hier aus müssen wir ein kleines Photoshop-Modell erstellen, während wir die Vorlage für die einzelne Galerieseite weiter erstellen.
Zuerst haben wir die Links Weiter und Zurück gestaltet. Sie befinden sich in einem absolut positionierten Feld in der Galerieliste, sodass wir sie trotz der anderen Schaltflächen und Dinge, die sich bereits in der Leiste befinden, auf der Seite zentrieren können. Sie nehmen dieselbe Klasse an wie die Schaltfläche "Eins senden", sodass dort Konstanz besteht.
Als nächstes haben wir diese sehr schmale linke Spalte, in der wir Text erhalten können. Wir beginnen mit einem 1/8 7/8 Raster, aber 1/8 ist einfach etwas zu schlank. Wir ändern es auf 1/4 3/4, aber das ist zu viel. So wie der sagenumwobene Babybär war 1/6 5/6 genau richtig.
Wir machen einige Typografiearbeiten in dieser engen Spalte und fügen den Titel hinzu (in einem
Tag natürlich, da es der wichtigste Titel auf der Seite ist), die Beschreibung und andere Abschnitte. Der größte Teil der Typografie passt einfach zu unserem einfachen und robusten Typografie-Setup.
Das 5/6-Raster ist alles für das Bild. Schön groß, was großartig ist. Es hat einen hellgrauen Hintergrund, genau wie Bilder in Blog-Posts (z
Wir denken darüber nach, ein bisschen Lust darauf zu bekommen, wie wir die Tags stylen. Wir sehen uns auf CodePen um (hier ist ein Link zum Tag "tags", META ALERT). Wir denken am Ende, dass das übertrieben ist und lassen sie als normale Links.
Wir sorgen dafür, dass die Schaltfläche "in voller Größe" auf eine der einfachsten Arten funktioniert. Öffnen Sie ein neues Fenster mit den Abmessungen des Bilds in voller Größe und zeigen Sie das Bild darin an. Es ist wie eine Modalbox aus den frühen 2000ern! Aber Ich mag es. Es ist einfach, es benötigt keine Menge Code (wie es ein Leuchtkasten tun würde) und es ist offensichtlich, mit ihm zu interagieren. Es ist noch besser, wenn du mich fragst.