Die inhärente Optik von filterbaren Portfolios (wie der Tuts + -Hub) hat sie sehr beliebt gemacht. Heute erstellen wir eines mit direktem Markup, CSS3 und etwas jQuery.
Schritt 1: Die Dateistruktur
Wir werden die folgende Dateistruktur für unser Projekt verwenden:
Ziehen Sie ein Projekt basierend auf diesen Dateien zusammen (Sie müssen HTML5 Shiv verwenden), und beginnen Sie mit dem HTML-Markup in index.html.
Schritt 2: HTML-Kopf
Lasst uns das Tempo hoch halten und eine Liste von Dingen aufstellen, die wir tun müssen, um das zu schaffen :
Deklarieren Sie den Medientyp und den Zeichensatz der Seite.
Stellen Sie die Breite unseres Darstellungsbereichs auf die Breite des Geräts ein und stellen Sie den anfänglichen Zoom auf 1 (Lesen Sie hier mehr darüber).
Gib unserer Seite einen Titel.
Favicon anhängen (interessiert an retina-proof Favicons?)
Fügen Sie unser Haupt-Stylesheet (style.css) bei.
Fügen Sie unser Stylesheet für die Bearbeitung von Medienabfragen bei (media-queries.css).
Link zur neuesten Version von jQuery.
Fügen Sie ein HTML5-Shiv hinzu, um HTML5-Kompatibilitätsprobleme mit alten Browsern zu behandeln.
Und das bekommen wir:
John Does Portfolio
Schritt 3: HTML Basic Markup
Im Hauptteil fügen wir zunächst einen 'Container' hinzu, um alle unsere Elemente innerhalb einer festgelegten Breite zu zentrieren, die auf der Seite zentriert ist. Darin fügen wir hinzu (machen Sie sich bereit für eine weitere Schnellfeuerliste):
EIN für unsere Überschrift ('John Doe').
Eine grundlegende Navigation () umfassend a
Menü mit fünf Einträgen und jeweils einer ID.
EIN für die Thumbnails mit der Klasse 'Arbeit'.
EIN mit all dem urheberrechtlich geschützten Material.
John Doe
Schritt 4: HTML-Abbildung und Bild
Wir werden die verwenden tag für unsere thumbnails und wendet die Klasse der jeweiligen Kategorie an, zu der sie gehört. In der Abbildung fügen wir ein Tag mit dem Bild () für den Hintergrund der Miniaturansicht und a Beschreibungsliste (
) für die Bildunterschrift.
Schritt 5: HTML-Beschriftung (DL, DT, DD)
Wie oben erwähnt, verwenden wir eine Beschreibungsliste für unsere Beschriftung. Unsere Beschreibungsbegriffe () werden unsere kleinen Überschriften sein - Kunde und Rolle, für unsere Beschreibungen () - Envato und Illustration.
Klient
Envato
Rolle
Illustration
Schritt 6: Das vollständige HTML
So sieht unser abgeschlossenes HTML-Markup aus:
John Does Portfolio
John Doe
Klient
Envato
Rolle
Illustration
Klient
Envato
Rolle
Drucken
Klient
Envato
Rolle
Logo
Klient
Envato
Rolle
Netz
Klient
Envato
Rolle
Drucken
Klient
Envato
Rolle
Netz
Klient
Envato
Rolle
Drucken
Klient
Envato
Rolle
Netz
Klient
Envato
Rolle
Illustration
Klient
Envato
Rolle
Drucken
Klient
Envato
Rolle
Netz
Klient
Envato
Rolle
Logo
Klient
Envato
Rolle
Illustration
Klient
Envato
Rolle
Netz
Klient
Envato
Rolle
Logo
Klient
Envato
Rolle
Drucken
Lassen Sie uns jetzt zum Styling übergehen.
Schritt 7: CSS-Auswahl und Bildlaufleiste
Wir beginnen mit einigen spielerischen Elementen. der Auswahlstatus und die Bildlaufleiste (die vollständig optional sind), und wir werden einige Schriftarten mitnehmen.
Im obigen Code haben wir zwei Webfonts von Google importiert - Open Sans und PT Sans Narrow. Dann legen wir einfach einen dunkelgrauen Hintergrund und eine weiße Textfarbe für die Benutzerauswahl fest.
Wir haben dann eine Breite von 9 Pixeln für unsere Bildlaufleiste (in Webkit-Browsern) festgelegt und der "Spur" einen hellgrauen Hintergrund, einen dünnen Rand und einen milden Einfügungsfeldschatten gegeben. Dann gaben wir dem Daumen der Bildlaufleiste einen dunkelgrauen Hintergrund und fügten einen dünnen Rahmen hinzu.
Hinweis: Weitere Informationen zu Webkit-Bildlaufleisten finden Sie in dem Beitrag von Chris Coyier.
Schritt 8: CSS Body
Wir geben unserem Körper einen hellgrauen Hintergrund und verwenden die zuvor importierte Schriftart 'Open Sans'. Wir fügen auch eine rote obere Bordüre hinzu, um die Finesse zu verbessern.
Jetzt setzen wir für unseren Container eine Breite von 960 Pixel, einen oberen und unteren Rand von 10 Pixel und zentrieren sie auf der Seite, indem wir den rechten und den linken Rand auf 'festlegen.Auto'. Wir erzwingen auch die Hardwarebeschleunigung auf (einigen) mobilen Geräten, indem-webkit-transform: translateZ (0);'.
Wir zentrieren den Text horizontal, fügen den oberen und den unteren Rand von jeweils 50 Pixel hinzu, setzen die Textfarbe auf Grau und positionieren sie unter Verwendung des Bereichs "Arbeit".Lösche beide'.
Wir werden damit beginnen, alle Standardstylings von unserem zu entfernen
. Dann fügen wir einen oberen und unteren Rand von 50px hinzu und richten den Text zur Mitte aus.
nav ul list-style: none; Polsterung: 0; Marge: 50px 0; Text ausrichten: Mitte;
Jetzt mit 'Anzeige: Inline', wir bekommen alle unsere s, um in einer Zeile anzuzeigen. Wir setzen den Cursor auf 'Zeiger' und fügen jedem einen 10px rechten Rand hinzu . Die Standardtextfarbe ist ein heller Grauton, der im Schwebeflug schwarz wird.
Wir fügen auch eine kleine Übergangszeit hinzu, um die Farbänderungen zu animieren.
nav ul li display: inline; Cursor: Zeiger; Rand rechts: 10px; Farbe: # 666; Übergang: 0,3 s; -Webkit-Übergang: 0,3 s; -Moz-Übergang: 0,3 s; -o-Übergang: 0,3 s; -ms-Übergang: 0,3 s; nav ul li: hover color: # 000;
Seit dem letzten ist das letzte Kind, es braucht keinen rechten Rand. Also entfernen wir es.
nav ul li: last-child margin-right: 0;
Nun fügen wir die Schrägstriche nach dem hinzu s. Das erreichen wir mit dem ':nach dem'Pseudo-Selektor. Durch die Einstellung seiner 'Inhalt'bis' / ', Farbe bis hellgrau und ein entsprechender linker Rand, wir können ein einfaches, aber effektives System der Verbindungstrennung erzeugen. Wir werden auch sicherstellen, dass die Schrägstriche die Farbe im Schwebeflug nicht ändern, indem die Standardfarbe aktiviert wird li: schweben auch.
nav ul li: nach margin-left: 10px; Inhalt: '/'; Farbe: #bbb; nav ul li: hover: nach color: #bbb;
Wieder müssen wir den Schrägstrich vom letzten entfernen .
nav ul li: last-child: after content: ";
Das ist alles für die Navigation, kommen wir jetzt zu den Miniaturbildern.
Schritt 13: CSS-Thumbnails
Zuerst fügen wir dem Abschnitt ".work" einen oberen und unteren Rand von 20px hinzu.
.Arbeit Marge: 20px 0;
Als nächstes werden wir jeden gestalten.Arbeitsfigur(alle unsere Miniaturbilder). Wir verwenden 'Schwimmer: links'um sie aufzustellen. Wir fügen dann einen 20px-Rand hinzu, legen eine Höhe und Breite von 200px fest und fügen einen milden Sepia-Effekt hinzu, indem Sie '-Webkit-Filter: Sepia (0.4)'. Dann setzen wir die Position zu relativ Damit können wir andere Elemente (in diesem Fall die Bildunterschrift) absolut innerhalb des Ordners positionieren Zahl. Wir werden dann ein mildes hinzufügen Box Schatten das wird auch als unsere Grenze funktionieren. Wir fügen auch eine kleine Übergangszeit hinzu, damit unsere Boxen wachsen und verkleinern können.
Wir stellen sicher, dass unser Bild immer in das Miniaturbild passt, indem Sie Höhe und Breite auf 100% setzen..
.Arbeitsfigur a img height: 100%; Breite: 100%;
Das ist alles für unsere grundlegenden Thumbnails. Lassen Sie uns jetzt an ihren Bildunterschriften arbeiten.
Schritt 14: CSS-Beschriftungen
Beschreibungsliste
Da wir nicht möchten, dass unsere Beschriftung anfangs sichtbar ist, setzen wir sie Opazität zu 0. Dann werden wir es absolut positionieren (innerhalb der Figur) und die Figur vollständig ausfüllen, indem alle 4 Eigenschaften festgelegt werden - oben, Recht, Unterseite, und links - zu 0.
Wir werden es dann setzen Zeilenhöhe zu 2,5 und geben Sie ihm einen dunklen, durchscheinenden Hintergrund. Da wir einen dunklen Hintergrund verwenden, setzen wir die Textfarbe auf Weiß. Wir fügen auch eine kleine Übergangszeit hinzu, um die Deckkraft weiter zu animieren Figur: schweben.
Da wir möchten, dass der Mauszeiger auf der Miniaturansicht erscheint, setzen wir seine Einstellung Opazität zu 1 auf Figur: schweben.
.Arbeitsfigur: hover dl Deckkraft: 1;
Beschreibung Begriffe
Zuerst setzen wir ihre Schriftfamilie zu 'PT Sans Narrow'. Damit sie etwas kleiner erscheinen als ihre Beschreibungen, setzen wir ihre Schriftgröße bis 80%. Dann konvertieren wir unsere Beschreibungsbegriffe (Client und Rolle) in Großbuchstaben.Text-Transformation: Großbuchstaben'. Wir werden auch einen negativen unteren Rand festlegen, um einen übermäßigen Abstand zwischen den Begriffen und ihren Beschreibungen zu vermeiden.
Wenn die Thumbnails einer bestimmten Kategorie die .aktuell Klasse (über JS) möchten wir, dass sie wachsen und ihren normalen Ton zurückbekommen (d. h. den Sepia entfernen). Wir skalieren sie mit 'transform: Maßstab (1,05)', skaliert es auf 1,05-fache der Originalgröße sowohl auf der x- als auch auf der y-Achse und entfernt das zuvor hinzugefügte Sepia mithilfe von'-Webkit-Filter: Sepia (0)'.
Hier machen wir genau das Gegenteil von dem, was wir mit dem gemacht haben .aktuell Thumbnails - wir verkleinern sie mit 'auf 75%transformieren: Skala (0,75)"und machen sie schwarz und weiß mit"-Webkit-Filter: Graustufen (1)'.
Folgendes tun wir mit unserem Javascript (in chronologischer Reihenfolge):
Erkennen nav> li Drücken Sie.
Verkleinern Sie alle Miniaturansichten, indem Sie ihnen die .nicht aktuell Klasse.
Ergänzen Sie die .Strom-Li Klasse zur entsprechenden Kategorie .
Entferne das .nicht aktuell Klasse nur aus den Miniaturansichten der ausgewählten Kategorie.
Ergänzen Sie die .aktuell Klasse auf alle Miniaturbilder der ausgewählten Kategorie.
# 2 wird hier mit der herunterskalieren() Funktion und Nr. 3, Nr. 4 und Nr. 5 werden mit Hilfe von ausgeführt anzeigen (kategorie) Funktion.
Schritt 18: JS The herunterskalieren() Funktion
Verwendung der removeClass und addClass Methoden entfernen wir die .aktuell Klasse aus den Elementen, die es haben und fügen Sie das hinzu .nicht aktuell Klasse für alle. Wir werden auch die entfernen .Strom-Li Klasse von jedem was hat es momentan.
Diese Funktion wird jedes Mal implementiert geklickt wird. Zuerst rufen wir die an herunterskalieren() Funktion zum Verkleinern aller Thumbnails. Dann fügen wir das hinzu .Strom-Li Klasse zum die der ausgewählten Kategorie entspricht. Wir werden dann die Klasse der Miniaturansichten der Kategorie von ändern .nicht aktuell zu .aktuell (wir hatten das angewendet .nicht aktuell Klasse für alle Thumbnails in der herunterskalieren() Funktion). Schließlich, wenn die ausgewählte Kategorie 'alles'entfernen wir die dynamisch hinzugefügten Klassen (d. h. .aktuell und .nicht aktuell) aus allen Thumbnails.
Hinweis: Seit dem Namen der Ich würde (des ) und Klasse (des Zahls) jeder Kategorie ist gleich, wir beziehen uns einfach auf die als '# + Kategorie' und die Zahls als '. + Kategorie'.
Schritt 20: JS Klicks erkennen und implementieren anzeigen (kategorie) Funktion
Schließlich durch die document.ready Methode, fügen wir das hinzu .Strom-Li Klasse zu li # alle und erkennen nav> li Klicks Wir bekommen dann die Ich würde der angeklickt und implementieren die anzeigen (kategorie) Funktion, wo die 'Kategorie' wird sein 'this.idID der angeklickten . So zum Beispiel, wenn die mit der id #drucken geklickt wird, show ('drucken') Wird implementiert werden.
Jetzt, da unsere Website voll funktionsfähig ist, lassen Sie uns darauf reagieren.
Schritt 22: CSS macht es ansprechend
Lassen Sie uns 'media-queries.css' öffnen und loslegen. Wie Sie Ihre Medienabfragen implementieren, liegt ganz bei Ihnen. Möglicherweise möchten Sie Medienabfragen in Ihrem Haupt-Stylesheet oder sogar modular und inline mit jeder Stildeklaration haben - es liegt an Ihnen!
Die für jeden Haltepunkt erforderlichen Stiländerungen werden hier beschrieben.
965px oder weniger
Verringern Sie die Breite des Containers auf 840 Pixel
Verringern Sie die Höhe und Breite der Miniaturbilder auf jeweils 170 Pixel, um 4 Miniaturbilder in jeder Reihe aufzunehmen [(170 Pixel + 40 Pixel) x 4 = 210 Pixel x 4 = 840 Pixel]
/ * Kleine Ansichtsfenster - Alte Monitore, Netbooks, Tablets (Querformat) usw. * / @media only Bildschirm und (max-width: 965px) .container width: 840px; .work figure width: 170px; Höhe: 170px;
860px oder weniger
Verringern Sie die Breite des Containers auf 720px
Erhöhen Sie die Höhe und Breite der Miniaturbilder auf jeweils 200px, um 3 in jeder Reihe aufzunehmen [(200px + 40px) x 3 = 240px x 3 = 720px]
/ * Kleinere Ansichtsfenster - mehr Tablets, alte Monitore * / @media only screen und (max-width: 860px) .container width: 720px; .work figure width: 200px; Höhe: 200px;
740px oder weniger
Verringern Sie die Breite des Containers auf 600 Pixel
Verringern Sie die Deckkraft der .nicht aktuell zu 50% (da wir jetzt hauptsächlich für mobile Geräte arbeiten)
Verringern Sie die Höhe und Breite der Miniaturbilder auf jeweils 160px, um 3 in jeder Reihe aufzunehmen [(160px + 40px) x 3 = 200px x 3 = 600px]
/ * Noch kleinere Ansichtsfenster - mehr Tablets usw. * / @media only screen und (max-width: 740px) .container width: 600px; .Workfigur Breite: 160px; Höhe: 160px; .not-current Opazität: 0,5;
610px oder weniger
Verringern Sie die Breite des Containers auf 460 Pixel
Stellen Sie den oberen und unteren Rand der Miniaturbilder auf 20 Pixel und den linken und rechten Rand auf 60 Pixel
Erhöhen Sie die Höhe und Breite der Miniaturbilder auf jeweils 200px, um 1 in jeder Reihe aufzunehmen [(200px + 120px) x 1 = 320px x 1 = 320px]
/ * Mobiltelefone (Querformat) und Tablets (Hochformat) * / @media only Bildschirm und (max. Breite: 610px) .container width: 460px; header font-size: 400%; nav ul li .work figure margin-left: 40px; Rand unten: 60px; .work figure dl height: 40px; oben: 200px; unten: 0px;
480px oder weniger
Verringern Sie die Breite des Containers auf 320px
Stellen Sie den oberen und unteren Rand der Miniaturbilder auf 20 Pixel und den linken und rechten Rand auf 60 Pixel
Erhöhen Sie die Höhe und Breite der Miniaturbilder auf jeweils 200px, um 1 in jeder Reihe aufzunehmen [(200px + 120px) x 1 = 320px x 1 = 320px]
/ * Mobiltelefone (Porträt) * / @media only Bildschirm und (max. Breite: 480px) .container width: 320px; .work figure width: 200px; Höhe: 200px; Marge: 20px 60px;
Browser-Kompatibilität
Die grundlegende Skalierungsfunktion (CSS-Transformationen) funktioniert in den meisten gängigen Browsern einwandfrei. Dazu gehören:
IE 9+ (verwenden Sie http://www.useragentman.com/IETransformsTranslator/ für niedrigere Versionen)
Firefox 14+
Chrome 21+
Safari 5.1+
Die Filtereffekte (Sepia und Graustufen) funktionieren nur in Webkit-Browsern.
jsFiddles
Ich habe drei jsFiddles erstellt, die Sie ausprobieren und ausprobieren können:
Unterteilungseffekt (vertikal)
Unterteilungseffekt (horizontal)
Diagonale maskierte Miniaturbilder
Fazit
Das ist es! Wir haben erfolgreich ein funktionsfähiges, filterbares und responsives Portfolio erstellt. Ich hoffe, Sie fanden dieses Tutorial hilfreich. Danke fürs Lesen!
Share
Accentsconagua
