Während dieses Tutorials werden wir das fantastische Timeline-Portfolio wie in einem früheren Tutorial von Tomas Laurinavicius erstellen. Wir werden einige responsive Techniken sowie CSS3-Animationen, Sass und ein wenig jQuery verwenden.
Datei- und Verzeichnisstruktur
OK, der erste Schritt ist das Erstellen der Dateien und Ordner, die wir benötigen. Das Bild unten zeigt unsere Wurzelstruktur.
Wie Sie sehen, haben wir hier eine sehr einfache Aufstellung. Im "css" -Verzeichnis erstellen Sie eine styles.scss Datei und auch eine Kopie von normalize.css. Um Sass in diesem Projekt verwenden zu können, müssen Sie entweder Sass auf Ihrem Computer installiert haben oder eine App, die das Betrachten und Kompilieren für Sie übernimmt. Ich verwende derzeit CodeKit für Mac, aber es gibt viele Alternativen wie Prepos, Scout und Koala, um nur einige zu nennen. Sie sind nicht alle kostenlos, aber was auch immer Sie wählen, spart Ihnen viel Zeit!
Erstellen Sie im Ordner "js" eine Datei mit dem Namen app.js und laden Sie eine Kopie von herunter modernizr.js auch hier zu platzieren. Der von mir verwendete Modernizr-Build umfasst alle CSS3- und HTML5-Tests, da wir nicht mehr benötigen sollten. Richtig, das umfasst unsere ursprünglichen Dateien und Ordner. Im nächsten Schritt prüfen Sie unser PSD-Design, um herauszufinden, welche Bits herausgeschnitten werden müssen.
Schneiden der PSD
Das Design dieser Seite ist unkompliziert, was die Entscheidung erleichtert, ob wir Scheiben benötigen. Tomas hat tatsächlich alle diese Assets zusammen mit der PSD bereitgestellt, so dass von diesem Design überhaupt keine Slices verfügbar wären. Ich entschied mich jedoch für dieses Tutorial, wir sollten die drei Portfolio-Bilder und das Ladesymbol unten auf der Seite herausschneiden. Dies ist mehr als alles andere als einfach, daher müssen wir in Photoshop keine Größenanpassung vornehmen.
Nehmen Sie in Photoshop das Slice-Werkzeug und zeichnen Sie die Slices sorgfältig aus. Sie können jedes Segment mit einem Doppelklick benennen. Dann benutzen Sie die Für Web speichern… (oder einen ähnlichen Menüpunkt je nach Ihrer Version von Photoshop), um die Slices in unser Bilderverzeichnis zu exportieren.
Ich habe dann in "images" einen neuen Ordner mit dem Namen "portfolio" erstellt, der die Bilder enthält, die sich auf die Portfolioelemente beziehen. Verschieben Sie die drei Portfoliobilder in diesen Ordner. Damit ist unser Schnittvorgang abgeschlossen!
Avatar-Bild
Gehen Sie jetzt zu uifaces.com und wählen Sie eines der Bilder aus, die Sie als unser Profilbild verwenden möchten. Ich habe es geschafft, das gleiche wie das Design zu finden, aber es ist egal, wen Sie wählen. Besorgen Sie sich die 128x128-Version und legen Sie sie im Ordner "images" ab.
Wir sind fast fertig mit unseren Bildern und müssen nur die Symbole für Social Media und Navigation auswählen. Das werden wir als nächstes tun.
Sprites
Wenn Sie Gruppen von Bildern wie Symbolen haben, empfiehlt es sich, ein Bild zu erstellen, das alle in einem Rastermuster enthält. Diese werden Sprites genannt. Sie können dies bis zum Äußersten führen und eine große Datei von erstellen jeden Einzelbild auf Ihrer Website, aber für dieses Tutorial erstellen wir jeweils zwei Sprites und eine entsprechende Retina-Version.
Mit den von Tomas bereitgestellten Asset-Links können wir jedes der Social Media-Symbole herunterladen. Besorgen Sie sich die 128x128-Pixel-Version von jedem, damit wir auf die benötigten Größen skalieren können. In Photoshop müssen wir dann eine Datei erstellen 101px um 51px. Ziehen Sie jedes der Social Media-Symbole in diese Datei und verkleinern Sie die Größe auf 24px um 24px. Die Symbole sind schwarz, aber wir müssen weiß sein. Wenden Sie daher auf jedes Symbol einen Ebenenstil an, der eine Farbüberlagerung von Weiß ergibt. Ändere deine Hintergrundfarbe in etwas Dunkles, damit wir sie sehen können und sie dann so anordnen…
Jedes Symbol ist genau 1 Pixel von den Kanten und voneinander. Ich habe auch die Deckkraft jedes Symbols auf 80% geändert. Duplizieren Sie nun diese Reihe von Symbolen und platzieren Sie sie direkt darunter 1 Pixel von den Rändern. Ändern Sie die Deckkraft der zweiten Reihe von Symbolen auf 100%. Es sollte ungefähr so aussehen…
Blenden Sie nun die Hintergrundebene in Photoshop aus, um einen transparenten Hintergrund und zu erhalten Für das Web speichern Als ein PNGbetitelt social-sprite.png im "images" -Ordner. Der nächste Schritt ist die Erstellung der Retina-Version dieses Sprites, sodass auf den Displays mit hoher Pixeldichte scharfe Symbole angezeigt werden. Dies sollte ziemlich einfach sein und beinhaltet nur die Verdoppelung des bereits vorhandenen. So wird die Retina-Version sein 202px um 102px. Merken, alles muss verdoppelt werden, einschließlich des Abstands um jedes Symbol. Für dieses Sprite benötigen wir also 2 Pixel zwischen jedem Symbol und an den Rändern. Die fertige Retina-Version sollte so aussehen…
Großartig! Jetzt blenden Sie einfach die Hintergrundebene aus und exportieren Sie als PNG aber diesmal nennen es es [email protected]. Dies ist eine Standardbenennungskonvention für die Retina-Version einer Bilddatei.
Jetzt müssen wir nur noch die Navigationssymbole verwenden. Diese Symbole sind Vektorobjekte in der PSD. Sie können sie also einfach in eine neue Datei kopieren und bei Bedarf skalieren. Die für die normale Version benötigte Größe ist 49px um 18px und die Netzhautversion ist doppelt so groß 98px um 36px. Die fertigen Bilder sollten so aussehen:
Ausgezeichnet! Speichern Sie diese als nav-sprite.png und [email protected]. Ich denke, dass damit alles fertig ist, was wir für die Bilder tun müssen. Lassen Sie uns also etwas Code schreiben!
Die Basis-HTML und -Sass
Beginnen wir mit den Barebones unserer Seite. Kopieren Sie in unserer index.html die folgende Markierung, um die Dinge zu starten:
Mein Portfolio
Es ist ein einfaches Layout mit der Main Element, das eine Seitenleiste enthält beiseite und ein Inhalt div. In der Seitenleiste haben wir zwei Abschnitte, Meine Informationund ein nav mit einer Klasse von Menüs. Unsere Abhängigkeiten sind ebenfalls enthalten, insbesondere die neueste Version von jQuery 1.x. Beginnen wir nun, unsere Sass-Datei mit einigen Variablen auszufüllen.
Das ist ein guter Teil des Codes, um damit anzufangen! Dies ist wirklich nur das Einrichten einiger Standardwerte und Variablen für die Verwendung in unserer Sass-Datei. Der wichtigste Abschnitt ist hier derjenige, der die vier Haltepunktvariablen enthält. Diese definieren, an welchen Punkten sich unser Layout ändern soll. Sass ist hier sehr nützlich, da wir beim Schreiben unserer Medienanfragen nur auf diese Variablen verweisen können. Wenn ein Haltepunkt geändert werden muss, gibt es nur eine Stelle, an der sie geändert werden kann.
Wie du an der sehen kannst @einführen Wir importieren außerdem die Google-Schriftart, die im Design und in der Kopie von verwendet wird Normalize.css Wir haben früher heruntergeladen. Die einzige Erklärung ist bisher die Gruppe Klasse, die eine ist Clearfix für Elemente, die floatierte Elemente enthalten. Weitere Informationen hierzu finden Sie auf nicolasgallagher.com.
Wenn alles richtig eingerichtet ist, speichern Sie styles.scssgeneriert die einfache CSS-Datei, die wir in unsere Seite aufgenommen haben. Wenn Sie die Seite jetzt anzeigen, wird ein ziemlich langweiliger weißer Bildschirm angezeigt. Machen Sie also mehr Spaß, indem Sie weitere Stile hinzufügen und den Seitenleistenbereich ausarbeiten.
Die Seitenleiste; Meine Information
Zunächst fügen wir der Sass-Datei Folgendes hinzu:
Jedes Element sollte jetzt positioniert werden relativ und habe auch die Box-Sizing Eigenschaft auf festgelegt Border-Box, die Elemente können prozentuale Breiten haben inklusiveihrer Polsterung. Dies bedeutet, dass wir zwei Elemente mit einer Breite von 50% nebeneinander setzen und dann die Auffüllung in jedem Element so anpassen können, dass wir es mögen, ohne das Layout zu beschädigen. Eine sehr nützliche CSS-Regel! Unterstützung für fast alle Browser erfolgt über die vom Hersteller angegebenen Deklarationen.
Die übrigen Stile hier dienen als Standard für unsere Seite. Wir müssen sicherstellen, dass die Hauptverpackungselemente zu jeder Zeit auf 100% Höhe bleiben, da unsere Seitenleiste den Bildschirm vertikal ausfüllen muss. Wir setzen den Körperhintergrund auf $ dunkelblau hier, das ist eigentlich unsere Seitenleistenfarbe. Dies gibt unserer Seitenleiste das Aussehen von 100% Höhe. In Wirklichkeit ist das Sidebar-Element selbst nur so hoch wie sein Inhalt, hat jedoch einen transparenten Hintergrund und zeigt damit die Farbe dahinter.
Beginnen wir damit, die Seitenleiste auszuarbeiten…
Chris Johnson
Erfahrene UX / UI Designer mit Sitz in London, UK
Dribbble Twitter Facebook Google+
Fügen Sie diesen Code dem hinzu .Meine Information div. Möglicherweise müssen Sie das umbenennen Portfolio-Bildje nachdem, wie Sie es genannt haben. Hier ist nicht viel los, aber speichern Sie die Datei und werfen Sie einen Blick in den Browser.
Schön. Jetzt öffne dich style.scss und geben Sie den folgenden Code ein:
Da wir hier eine Mobile-First-Strategie verfolgen, benötigen wir bei mobilen Auflösungen eine volle Breite und volle Höhe. Eine schnelle Medienanfrage für unsere $ Break-ThreeHaltepunkt schwebt die Seitenleiste nach links und beschränkt die Breite auf 20%.
Die Stile für .Meine Information sind einfach genug Wir möchten einfach nur alles zentrieren und an den Rändern Platz lassen. Um unseren bald erscheinenden Menübereich abzutrennen, verwenden wir einfach einen 1px-Rahmen am unteren Rand. Um das zu machen Portfolio-Bild Rundschreiben, geben Sie eine 50% Grenzradius und schließlich müssen wir einige Schriftstile für alle h1- oder h2-Elemente innerhalb dieses Abschnitts überschreiben.
Social Media-Links
Jetzt müssen wir diese Social-Media-Links mit einem der zuvor erstellten Sprites angehen. Fügen Sie den folgenden Code direkt nach dem ein h2Deklarationen im letzten Codeblock.
Das sieht ziemlich kompliziert aus, ist es aber nicht wirklich. Der größte Teil dieses Codes behandelt, wie die Symbole und ihre Schwebeflugzustände angezeigt werden. Zuallererst müssen wir jeden von ihnen schwimmen lassen geben Sie ihnen Breite und Höhe sowie einen gewissen Rand, um sie zu platzieren. Als nächstes legen wir das Hintergrundbild fest. Dies sollte auf das soziale Sprite eingestellt werden, das wir zuvor erstellt haben. Zuletzt müssen wir sicherstellen, dass der in jedem Element verwendete Text nicht auf der Seite angezeigt wird. Das TexteinzugEigenschaft kümmert sich gut darum.
Der nächste Abschnitt ist der interessante. Hier legen wir fest, welcher Hintergrund für Anzeigen mit hoher Pixeldichte verwendet werden soll. Die Idee hier ist, die "verdoppelte" Version des Social Sprites zu verwenden ob Das Pixelverhältnis des Geräts beträgt 2. Die HintergrundgrößeDiese Eigenschaft ist notwendig, um die Datei wieder auf die ursprüngliche Größe zu skalieren, so dass unser Positionierungscode vollständig ist funktioniert einfach ohne etwas kopieren zu müssen.
Die nächsten vier Abschnitte sind alle dasselbe Konzept. Wir legen nur die Hintergrundposition für jedes Symbol und das jeweilige fest schweben Zustand. Lass uns einen Blick in den Browser werfen:
Genial! Das sieht wirklich gut aus. Wenn alles in Ordnung ist, sollten die Hover-Zustände funktionieren und auf einem iPhone / iPad usw. alles gestochen scharf aussehen. Beginnen wir nun mit dem Sidebar-Menü.
Die Seitenleistenmenüs
Beginnen Sie mit der Eingabe der folgenden in index.html in der MenüsContainer.
Arbeit
Neueste
Web-Design
Branding
Fotografie
Drucken
Mobiles Design
Über
Kompetenzen
Erfahrung
Bildung
Kunden
Referenzen
Blog
Kontakt
Adresse
Telefon
Soziale Netzwerke
Email
Ziemlich selbsterklärend, denke ich, also geben wir die folgenden Stile nach dem ein Meine Information Abschnitt, aber immer noch im Gesamtbild SeitenleisteElement.
Dies ist den sozialen Symbolen tatsächlich sehr ähnlich, was das Konzept und die Umsetzung des Konzepts angeht. Für die Menüs Artikel selbst möchten wir nur, dass alles zentriert wird. Sobald wir über unsere kommen $ Break-Three Haltepunkt Wir brauchen etwas Abstand, um die Menüs etwas von den Kanten entfernt zu positionieren.
Jedes von den h3 Elemente sollten unterschiedliche Farben und unterschiedliche Symbole haben. Wir verwenden eine Kombination aus :VorPseudoelement, Sprites und Medienabfragen, um dies zu erreichen. Abgesehen davon haben wir ein paar Medienanfragen, um die Margen der zu kontrollieren h3Elemente bei größeren Bildschirmgrößen. Dies bedeutet, dass sie immer korrekt in Bezug auf ihre Menüs positioniert sind.
Apropos Menüs, wir werden in Kürze das CSS für sie hinzufügen. Zuerst werfen wir einen Blick in den Browser:
Die Titel sehen wirklich gut aus! Die Menüs nicht so sehr. Lassen Sie uns das schnell erledigen, bevor uns die blauen Vorgaben noch mehr schmerzen…
Bei mobilen Auflösungen möchten wir, dass unsere Menüs ausgeblendet werden, sodass der Benutzer auswählen kann, ob er sie anzeigen oder anzeigen möchte, wenn er darauf zugreifen möchte. Sobald wir unsere getroffen haben $ Break-ThreeDie Menüs sollten immer sichtbar sein.
Das .öffnenKlasse behandelt, wie die Menüs angezeigt werden, wenn sie geöffnet sind. Das Design hat sie ziemlich genau platziert, also machen wir das hier auch mit Rändern. Wieder die $ Break-ThreePunkt kommt ins Spiel und überschreibt die Margen für diese Auflösungen und darüber. Die Stile für li Elemente sind ziemlich einfach. Die Hauptsache ist die Verwendung von CSS3-Übergängen. Ich habe sie hier verwendet, um beim Schweben auf dem Element ein schönes verblassendes Aussehen zu erzeugen. Ich ermutige Sie, mit Übergängen herumzuspielen, um zu sehen, welche interessanten Effekte Sie erzielen können!
Speichern Sie die Datei und zeigen Sie die Ergebnisse im Browser an.
Sehr schön! Die Menüs verhalten sich genau so, wie sie sollten. Wir werden jetzt unser erstes bisschen JavaScript / jQuery ausführen, um das Öffnen und Schließen der Menüs zu steuern.
Öffnen app.js und geben Sie die folgende Funktion ein:
Wir starten diese Datei mit der jQuery-Dokumentbereitschaftsfunktion Das Programm wartet im Wesentlichen darauf, dass das Dokument vollständig bereit ist, bevor der Code ausgeführt wird. Lesen Sie mehr über die fertige Veranstaltung auf api.jquery.com.
Wir fügen dann ein beliebiges Klickereignis an h3in unserem MenüsElement. Wenn dieses Ereignis auftritt (wenn der Benutzer auf klickt) h3) wir verwenden jQuery, um das "nächste" zu finden ul Element und wechseln Sie die Klasse von öffnen darauf Wenn das Element bereits über die Klasse verfügt, wird es entfernt und umgekehrt, wenn dies nicht der Fall ist. In der letzten Zeile werden alle Standardaktionen für das Element angehalten. Das trifft hier wohl nicht zu, weil h3 Elemente haben keine Standardaktion, wohingegen ein Ankertag dies tut. Dennoch ist es eine gute Praxis, sich daran zu gewöhnen, es einzubinden, wenn Sie Click-Event-Handler verwenden.
Speichern Sie diese Datei und kehren Sie zum Browser zurück. Wenn Sie bei mobilen Auflösungen auf die Menütitel klicken, sollte sich das Menü darunter öffnen. Wenn dies nicht der Fall ist, überprüfen Sie das JavaScript auf Fehler oder aktualisieren Sie Ihren Browser und versuchen Sie es erneut.
Das schließt den Seitenleistenbereich ein! Lass uns vorwärts gehen und etwas Inhalt auf die Seite bringen.
Hauptinhalt
Der erste Schritt hier ist das Hinzufügen des HTML-Codes zur Seite.
7. November 2013
Kostenlose PSD-Vorlage für Startups, kleine Unternehmen und grundsätzlich für alle, die gutes Design mögen.
Klient: Despreneur
Stichworte: Web-Design
7. November 2013
Kostenlose PSD-Vorlage für Startups, kleine Unternehmen und grundsätzlich für alle, die gutes Design mögen.
Klient: Despreneur
Stichworte: Web-Design
7. November 2013
Kostenlose PSD-Vorlage für Startups, kleine Unternehmen und grundsätzlich für alle, die gutes Design mögen.
Klient: Despreneur
Stichworte: Web-Design
Wird geladen…
Setzen Sie diesen Code in das .Inhalt div. Wir haben die drei Artikel, die im Design enthalten sind, und auch einen Artikel zum Laden. Ich habe das Ladesymbol in sein eigenes eingefügt Portfolio-Element So können wir die Struktur der Seite beibehalten. Ich kann dann einfach das Lade-Symbol selbst in der Portfolio-Bild Element. Sie werden hier auch das erste sehen Portfolio-Element hat eine Klasse von zuerst. Dies wird in unserem CSS wichtig sein, auf das wir nach einem kurzen Blick in den Browser zugreifen werden:
Schön, aber nicht ganz das, was wir wollen, also kommen wir direkt zu den Stilen.
Ein weiteres großes Stück Code dort! Lassen Sie uns das Stück für Stück abbauen. Das .Inhalt Styles sind den Sidebar-Styles ähnlich, da wir sie bei mobilen Auflösungen nur in voller Breite benötigen, aber irgendetwas bei oder über unserer $ Break-ThreeWir sollten es schwimmen und die Breite auf 80% ziehen. Wir müssen auch das geben Inhalt div einen weißen Hintergrund, um ihn von der Seitenleiste zu trennen.
Das Portfolio-Element Elemente sollten einen grauen Hintergrund haben. Um die Zeitleiste am linken Rand des Inhaltsbereichs zu erstellen, geben wir jede an Portfolio-Element ein :VorElement. Hier positionieren wir ihn einfach absolut 17px von der linken Kante und verwenden den oberen / unteren Trick, um ihn auf 100% Höhe zu bringen. Dies beinhaltet die Einstellung sowohl der obenund UnterseiteEigenschaft auf 0, was bedeutet, dass sich das Element an beiden Positionen befindet, was zu einem Element mit voller Höhe führt. Dies funktioniert auch für die linken und rechten Eigenschaften, um ein Element mit voller Breite zu erstellen. Wir müssen unsere positionieren zuerstPortfolio-Element weg von der oberen Kante des Fensters, das wir hier erreichen, indem wir die obere Eigenschaft auf 30px setzen.
Das Portfolio-Info Artikel sollten wieder 100% breit sein, es sei denn, wir sind bei $ Break-Three oder höher. Um den kleinen roten Kreis des Designs zu erstellen, entschied ich mich für die Verwendung des Datum Elemente, wie die beiden scheinen verbunden zu sein. In der CSS ist es am besten, a zu verwenden :Vor Pseudo-Element. Um es zu einem Kreis zu machen, muss es einige Höhe und Breite haben und ein Grenzradius von 50%. Wir positionieren es dann absolut links vom Datum. Um die kleine Lücke zu erhalten, wenden Sie einfach einen Rand in der gleichen Farbe wie an Portfolio-Element Elemente.
Das Meta Informationen sind sehr einfach. Setzen Sie den Text einfach auf Schwarz und geben Sie ihm einen oberen Rand. Irgendein Tags hier sollten keine Ränder haben. Speichern Sie die Datei und sehen Sie, was dieser relativ kurze Codeabschnitt erreicht hat.
Das kommt jetzt sehr nahe! Machen wir weiter mit unserem InhaltStile…
Platzieren Sie diese direkt nach dem Portfolio-Info Stile. Durch diesen kurzen Codeblock werden die Bilder in den Portfolioelementen ansprechbar. Die Idee ist, die Bilder so klein wie nötig zu machen, aber nur bis zu ihrer tatsächlichen Breite. Dies bedeutet, dass Sie Bilder mit fester Breite haben müssen, aber dies ist in einem Layout / Template wie diesem durchaus möglich, da die Bilder wahrscheinlich dynamisch generiert und auf eine bestimmte Größe zugeschnitten werden.
Wir benutzen auch die Portfolio-Bild Elemente, um ein weiteres Designdetail hinzuzufügen, dh den dünnen Rand zwischen den Bildern und den Informationen. Wenn Sie jetzt einen anderen Blick in den Browser werfen, sollten Sie sehen, dass die Bilder mit dem Browser gut skaliert werden und im Allgemeinen einfach großartig aussehen!
Next Up
Es ist Zeit für eine Kaffeepause! Im folgenden und letzten Teil dieser Serie fügen wir dem Layout einige Flimmern hinzu. Wir erstellen das Ladesymbol unten in unserem Inhaltsbereich, animieren es mit CSS3 und ahmen dann unendliches Scrollen nach, während weitere Portfolioelemente geladen werden.
Accentsconagua
Share
Was Sie erstellen werden
Wird geladen…
Wird geladen…