Code Machen Sie es sich recht eine einfache HTML-Bildergalerie für Ihre Sidebar
Heute werde ich Ihnen zeigen, wie HTML verwenden und ein wenig CSS eine grundlegende Fotogalerie für Seitenleiste einen Blog zu erstellen. Dies ist ein vielseitiges Layout, die Sie für Sidebar Navigation verwenden können, Blogrolls, oder einfach nur Ihre Lieblingsbilder zu zeigen.
In diesem Anfänger-Level-Tutorial, werde ich Sie durch die Schritte, die für eine zweispaltige Sidebar Galerie mit sechs 100px Quadrat Bilder. Jedes Bild Link auf eine andere Seite. Am Ende der Post, habe ich einige CSS Styling-Optionen enthalten die Galerie anpassen.
Was Sie benötigen dieses Tutorial nutzen
Sie brauchen keine Vorkenntnisse mit HTML oder CSS dieses Tutorial zu verwenden, ich werde Sie durch sie gehen.
Alles bereit? Lass uns anfangen!
Laden Sie Ihre Bilder
Wenn Sie Blogger verwenden, können Sie Ihre Bilder auf Ihren Picasa-Webalbum für Ihren Blog hochladen. Wenn Sie auf selbst gehosteten Wordpress sind, um Ihre Bilder zu Ihrer Medienbibliothek hochladen. TypePad-Benutzer können Bilder auf die Datei-Manager laden. Egal auf welcher Plattform Sie sind auf, wenn Sie es vorziehen, Photobucket oder einen anderen Bild-Hosting-Service zu nutzen, können Sie sich!
Nachdem Sie Ihre Bilder hochgeladen haben, sind Sie bereit, den HTML-Code für die Galerie Schreiben zu beginnen.
Hier ist die Skelett-Vorlage für eine 6 Bildergalerie:
Ich habe eine editierbare Version dieser Vorlage auf Codepen erstellt. Sie können den Editor in einem neuen Tab öffnen mit dem Tutorial, Code zusammen. Wenn Sie Codepen benutzen, um Ihre HTML zu schreiben, werden Sie eine Vorschau sehen, wie Ihre Galerie aussehen wird, bevor Sie es zu Ihrem Blog hinzufügen. Das ist schön, da Sie nicht über ein Chaos auf Ihrem Blog kümmern müssen, während Sie experimentieren!
Wenn Sie lieber Ihre HTML „offline“ schreiben, stellen Sie sicher, dass Sie einen geeigneten Text-Editor haben - Editor eingebaut ist auf PCs wird TextEdit eingebaut auf Macs (Sie werden es einrichten müssen für die Verwendung als ein HTML-Editor zuerst). Nie bearbeiten HTML mit einem Textverarbeitungsprogramm.
Lassen Sie mich durch den HTML nehmen und erklären, was jeder Teil bedeutet.
Die erste Zeile ist eine Öffnung
Tag mit der Klasse von „sidebar-Bild-Galerie“. In HTML und CSS, ist ein div wie ein Container für die Elemente im Inneren. In diesem Fall wird unsere Galerie div „enthält“ alle Ihre Bildelemente.
Hier ist, wo Sie den Link, um Ihre Leser geben wird gehen, wenn sie das Bild klicken. So zum Beispiel, wenn ich wollte mein Bild auf Google verbinden, würde ich es wie folgt schreiben:
Hier ist, wo Sie den direkten Link zu Ihrem Bild gelangen. Wenn Sie Ihr Bild auf Ihrem Picasa-Album hochgeladen, klicken Sie auf das Bild in Ihrem Album seiner vollen Größe Version zu erreichen, dann klicken Sie rechts auf das Bild und wählen Sie die Option die Bildposition zu kopieren. In selbst gehosteten Wordpress, klicken Sie auf „Bearbeiten“ unter Ihrem Bild in der Medienbibliothek und die Datei-URL kopieren. TypePad Benutzer direkt auf den Bildtitel in Ihrem Datei-Manager die direkte URL zu erhalten.
Aufbauend auf dem letzte Beispiel ist hier, wie ich den direkten Link zu meinem Bild geben würde:
width = "" height = ""
Geben Sie die Breite und Höhe des Bildes hier. Ich demonstriert dies mit 100 x 100 Pixel quadratische Bilder:
Fügen Sie keine „px“ nach der Breite oder Höhe, geben Sie die Nummer nur.
Alt-Text hilft dem Leser mit Sehbehinderungen die Bilder auf Ihrem Blog zu verstehen. Da wir die Bilder auf eine andere Seite sind die Verknüpfung, sollte der Alt-Text Ihre Besucher informieren, wo der Link geht. So zum Beispiel, würde ich in Alt-Text für ein Bild füllen zu Google wie diese Verknüpfung:
Das Schließen Ankertag schließt den Link. Lassen Sie dies nicht aus, oder Ihre Links werden seltsam verhalten!
Wiederholen Sie diesen Vorgang für jedes Ihrer Bild-Links, um sicherzustellen, zuerst in der Ziel-URL zu füllen, die Bildquelle URL nächste, dann schließlich die Attribute des Bildes (Breite, Höhe und alt).
Nachdem Sie alle Bild Links abgeschlossen haben, werden Sie feststellen, dass die Galerie Behälter mit dem Schließen schließen
-Tag.
Wenn Sie entlang in Codepen arbeiten, an dieser Stelle Ihre Vorschaufenster zeigt Ihnen sechs Bilder in einer horizontalen Reihe.
Wir möchten, dass in einem zweispaltigen Layout machen, und wir werden, dass der CSS mit einer Linie tun.
In der CSS-Fenster in Codepen, geben Sie dies:
Diese Regel legt die Breite der Galerie Container 210px, die die 100x100px quadratische Bilder in zwei Spalten zwingt, wie folgt aus:
Fügen Sie die Galerie zu Ihrem Blog
Sobald Ihre Galerie abgeschlossen ist, sind Sie bereit, es zu Ihrem Blog hinzuzufügen! Wir werden die CSS zuerst hinzufügen, so dass Ihre Bilder gestylt werden, sobald Sie den HTML-Code hinzuzufügen.
In Ihrem Codepen, kopieren Sie die CSS-Regel in der CSS-Fenster und fügen Sie ihn in das benutzerdefinierte CSS-Feld für Ihre Blogging-Plattform. Wenn Sie auf Blogger sind, gehen Sie auf Vorlage> Anpassen> Erweitert> CSS hinzufügen. Wenn Sie auf TypePad sind, gehen Sie zum Design> Benutzerdefinierte CSS. Auf Wordpress wird Ihre benutzerdefinierte CSS-Standort variieren. Wenn Sie mit Jetpack Custom CSS Option, es ist unter Darstellung> CSS bearbeiten.
Speichern Sie Ihre CSS. Nichts wird anders aussehen auf Ihrem Blog noch. Sie sind die CSS arbeiten sehen, wenn Sie die HTML hinzuzufügen.
Speichern Sie Ihr neues Widget und Sie sollten Ihre neue Galerie erscheinen in Ihrer Sidebar. Gute Arbeit!
Weitere Anpassungsoptionen
Wenn Sie ein bisschen mehr CSS sind, gibt es ein paar einfache Kniffe Sie Ihre Galerie machen kann es ein wenig mehr Stil zu geben. Jede dieser CSS-Erweiterungen arbeitet in den aktuellen Versionen von Firefox, Chrome, - Safari und in Internet Explorer 9+. IE8 wird ausgelassen, wie üblich.
Nehmen Sie die Bilder Runde
Keine Notwendigkeit öffnen Photoshop können Sie Bilder machen rund mit einer Zeile CSS! Fügen Sie einfach diese CSS-Regel unter Ihrer .sidebar-Bild-Galerie Breitenregel:
Boom, runde Bilder!
Bild ändern Opazität auf Hover
Sie können die CSS Opazität Eigenschaft verwenden und die: Pseudoklasse schweben um die Bilder zu machen scheinen „in verblassen“ oder „fade out“, wenn sie mit der Maus schwebte sind.
Um die Bilder erscheinen zu „verblassen in“, wenn sie schwebt, werden Sie brauchen, um ihre Opazität in ihrem un-schwebte Zustand zu senken. Um dies zu tun, fügen Sie diese Regel in Ihrem CSS:
Wenn Sie die border-radius Regel über demo'd verwendet haben, können Sie die Opazität als die nächste Zeile von dieser Regel wie folgt hinzu:
Das legt die anfängliche Trübung des Bildes bei 0,7 auf einer Skala von 0,1 bis 1, mit 0,1 als die niedrigste sichtbaren Opazität und 1 als Voll Opazität. Sie nicht Ihre erste Opazität zu niedrig eingestellt - Hover-Effekte, nicht so gut auf Touchscreen-Geräten arbeiten, und Sie nicht möchten, dass Ihr Bild für Touchscreen-Besucher zu verblasst.
Jetzt ist es Zeit, die hovered- Opazität mit der einzustellen: Pseudoklasse schweben. Hier ist die Regel:
Nun, wenn jedes Ihrer Bilder schwebt, wird der volle Opazität kommen.
Um den Effekt zu umkehren und machen die Bilder „fade out“ ein wenig, wenn schwebte, schalten Sie die Opazitätsstufen in den beiden Regeln, so dass Ihre erste Opazität 1 ist.
Machen Sie die Bilder verschieben
Sie können mit einem CSS verwandeln die Bilder ein bisschen Bewegung geben. Versuchen Sie, diese zu beginnen:
Diese Regel macht das Bild kippt leicht nach links, wenn es schwebt wird. Wenn Sie die Opazität verwendet: schweben oben Regel nach oben, können Sie dies kombinieren können: schweben Regel mit, dass man, wie folgt aus:
Sie können den Grad der Drehung ändern, indem Sie auf eine andere Zahl, positive oder negative Veränderung -10deg. Sicherstellen, dass alle vier Instanzen der Nummer ändern, so dass Ihre Wirkung auf die gleiche Weise von Browser zu Browser funktioniert.
Ich sparte ein separates Codepen mit all diesen zusätzlichen CSS-Effekte hier angewendet. Experimentieren Sie mit ihm ein wenig und sehen, was Sie kommen mit!
In Verbindung stehende Artikel
Die erste Zeile ist eine Öffnung
Hier ist, wo Sie den Link, um Ihre Leser geben wird gehen, wenn sie das Bild klicken. So zum Beispiel, wenn ich wollte mein Bild auf Google verbinden, würde ich es wie folgt schreiben:
Hier ist, wo Sie den direkten Link zu Ihrem Bild gelangen. Wenn Sie Ihr Bild auf Ihrem Picasa-Album hochgeladen, klicken Sie auf das Bild in Ihrem Album seiner vollen Größe Version zu erreichen, dann klicken Sie rechts auf das Bild und wählen Sie die Option die Bildposition zu kopieren. In selbst gehosteten Wordpress, klicken Sie auf „Bearbeiten“ unter Ihrem Bild in der Medienbibliothek und die Datei-URL kopieren. TypePad Benutzer direkt auf den Bildtitel in Ihrem Datei-Manager die direkte URL zu erhalten.
Aufbauend auf dem letzte Beispiel ist hier, wie ich den direkten Link zu meinem Bild geben würde:
width = "" height = ""
Geben Sie die Breite und Höhe des Bildes hier. Ich demonstriert dies mit 100 x 100 Pixel quadratische Bilder:
Fügen Sie keine „px“ nach der Breite oder Höhe, geben Sie die Nummer nur.
Alt-Text hilft dem Leser mit Sehbehinderungen die Bilder auf Ihrem Blog zu verstehen. Da wir die Bilder auf eine andere Seite sind die Verknüpfung, sollte der Alt-Text Ihre Besucher informieren, wo der Link geht. So zum Beispiel, würde ich in Alt-Text für ein Bild füllen zu Google wie diese Verknüpfung:
Das Schließen Ankertag schließt den Link. Lassen Sie dies nicht aus, oder Ihre Links werden seltsam verhalten!
Wiederholen Sie diesen Vorgang für jedes Ihrer Bild-Links, um sicherzustellen, zuerst in der Ziel-URL zu füllen, die Bildquelle URL nächste, dann schließlich die Attribute des Bildes (Breite, Höhe und alt).
Nachdem Sie alle Bild Links abgeschlossen haben, werden Sie feststellen, dass die Galerie Behälter mit dem Schließen schließen
Wenn Sie entlang in Codepen arbeiten, an dieser Stelle Ihre Vorschaufenster zeigt Ihnen sechs Bilder in einer horizontalen Reihe.
Wir möchten, dass in einem zweispaltigen Layout machen, und wir werden, dass der CSS mit einer Linie tun.
In der CSS-Fenster in Codepen, geben Sie dies:
Diese Regel legt die Breite der Galerie Container 210px, die die 100x100px quadratische Bilder in zwei Spalten zwingt, wie folgt aus:
Fügen Sie die Galerie zu Ihrem Blog
Sobald Ihre Galerie abgeschlossen ist, sind Sie bereit, es zu Ihrem Blog hinzuzufügen! Wir werden die CSS zuerst hinzufügen, so dass Ihre Bilder gestylt werden, sobald Sie den HTML-Code hinzuzufügen.
In Ihrem Codepen, kopieren Sie die CSS-Regel in der CSS-Fenster und fügen Sie ihn in das benutzerdefinierte CSS-Feld für Ihre Blogging-Plattform. Wenn Sie auf Blogger sind, gehen Sie auf Vorlage> Anpassen> Erweitert> CSS hinzufügen. Wenn Sie auf TypePad sind, gehen Sie zum Design> Benutzerdefinierte CSS. Auf Wordpress wird Ihre benutzerdefinierte CSS-Standort variieren. Wenn Sie mit Jetpack Custom CSS Option, es ist unter Darstellung> CSS bearbeiten.
Speichern Sie Ihre CSS. Nichts wird anders aussehen auf Ihrem Blog noch. Sie sind die CSS arbeiten sehen, wenn Sie die HTML hinzuzufügen.
Speichern Sie Ihr neues Widget und Sie sollten Ihre neue Galerie erscheinen in Ihrer Sidebar. Gute Arbeit!
Weitere Anpassungsoptionen
Wenn Sie ein bisschen mehr CSS sind, gibt es ein paar einfache Kniffe Sie Ihre Galerie machen kann es ein wenig mehr Stil zu geben. Jede dieser CSS-Erweiterungen arbeitet in den aktuellen Versionen von Firefox, Chrome, - Safari und in Internet Explorer 9+. IE8 wird ausgelassen, wie üblich.
Nehmen Sie die Bilder Runde
Keine Notwendigkeit öffnen Photoshop können Sie Bilder machen rund mit einer Zeile CSS! Fügen Sie einfach diese CSS-Regel unter Ihrer .sidebar-Bild-Galerie Breitenregel:
Boom, runde Bilder!
Bild ändern Opazität auf Hover
Sie können die CSS Opazität Eigenschaft verwenden und die: Pseudoklasse schweben um die Bilder zu machen scheinen „in verblassen“ oder „fade out“, wenn sie mit der Maus schwebte sind.
Um die Bilder erscheinen zu „verblassen in“, wenn sie schwebt, werden Sie brauchen, um ihre Opazität in ihrem un-schwebte Zustand zu senken. Um dies zu tun, fügen Sie diese Regel in Ihrem CSS:
Wenn Sie die border-radius Regel über demo'd verwendet haben, können Sie die Opazität als die nächste Zeile von dieser Regel wie folgt hinzu:
Das legt die anfängliche Trübung des Bildes bei 0,7 auf einer Skala von 0,1 bis 1, mit 0,1 als die niedrigste sichtbaren Opazität und 1 als Voll Opazität. Sie nicht Ihre erste Opazität zu niedrig eingestellt - Hover-Effekte, nicht so gut auf Touchscreen-Geräten arbeiten, und Sie nicht möchten, dass Ihr Bild für Touchscreen-Besucher zu verblasst.
Jetzt ist es Zeit, die hovered- Opazität mit der einzustellen: Pseudoklasse schweben. Hier ist die Regel:
Nun, wenn jedes Ihrer Bilder schwebt, wird der volle Opazität kommen.
Um den Effekt zu umkehren und machen die Bilder „fade out“ ein wenig, wenn schwebte, schalten Sie die Opazitätsstufen in den beiden Regeln, so dass Ihre erste Opazität 1 ist.
Machen Sie die Bilder verschieben
Sie können mit einem CSS verwandeln die Bilder ein bisschen Bewegung geben. Versuchen Sie, diese zu beginnen:
Diese Regel macht das Bild kippt leicht nach links, wenn es schwebt wird. Wenn Sie die Opazität verwendet: schweben oben Regel nach oben, können Sie dies kombinieren können: schweben Regel mit, dass man, wie folgt aus:
Sie können den Grad der Drehung ändern, indem Sie auf eine andere Zahl, positive oder negative Veränderung -10deg. Sicherstellen, dass alle vier Instanzen der Nummer ändern, so dass Ihre Wirkung auf die gleiche Weise von Browser zu Browser funktioniert.
Ich sparte ein separates Codepen mit all diesen zusätzlichen CSS-Effekte hier angewendet. Experimentieren Sie mit ihm ein wenig und sehen, was Sie kommen mit!