Fußzeile CSS-Design leicht gemacht

Wenn Überschriften die kühnen, auffälligen Elemente sind, die einen Benutzer in den Inhalt einer Website führen und die ersten Eindrücke vermitteln, können Fußzeilen als „Abschiedsgedanken“ einer Website angesehen werden. eine grafische Buchstütze für alle anderen Elemente auf der Seite. Sie sind vielleicht nicht sehr auffällig, aber sie sind da, um einen wichtigen Job zu erledigen.

In den letzten Jahren sind Fußzeilen jedoch über ihre sanften Wurzeln hinaus gewachsen, um die Datenschutzrichtlinien, Seitenlinks und Kontaktdaten zu füllen und zu eigenständigen und mutigen Aussagen über intelligentes Webdesign zu werden.

Darüber hinaus enthalten sie heute häufig eine große Menge an Informationen. Dies ist jedoch nicht nur Faulheit des Codierers. Fußzeilen sind zu einem nützlichen Zuhause für Inhalte geworden, die sich besser dazu eignen, außerhalb des Flusses der Körperkopie zu sitzen.



1. Hier ist eine, die wir zuvor gemacht haben

Wir möchten, dass unsere CSS-Fußzeile dem in diesem Tutorial erstellten Header ähnelt, aber auch eindeutig ist. Überlegen Sie sich also, was sich ändern und was beibehalten werden soll.

Blenden Sie den inneren Abschnitt, den Feed und den Seiteninhalt der Ebenengruppen aus. Wir werden den größeren Wiederholungsbalken von Grund auf neu erstellen. Erstellen Sie dazu eine neue Ebene und füllen Sie ein größeres Rechteck mit Schwarz. Kopieren Sie die Ebeneneffekte aus der Balkenebene und fügen Sie sie in die neue ein.

3. Wählen Sie einen Baum

Bewegen Sie die untere Glühebene nach unten unter Ihre neue Balkenebene. Öffnen Sie nun tree.psd aus Ihren Tutorial-Dateien. Dieses Bild wurde von sxc.hu erhalten. Es gibt drei Schichten - das Original, eine Kopie und eine rote Schicht dazwischen. Löschen Sie die Kopie, damit das Rot durchscheint.

4. Ein Hauch von Magie

Verwenden Sie den Zauberstab, um die Blätter des Baumes zu löschen. Die Abzüge werden pixeliert, dies spielt jedoch keine Rolle, da wir die Bildgröße reduzieren. Mach dir keine Sorgen, dass Teile des blauen Himmels durchscheinen - wir werden uns im nächsten Schritt darum kümmern.

5. Ändern Sie die Größe

Ziehen Sie die Kopierebene auf footer_final.psd und benennen Sie sie in einen Baum um. Reduzieren Sie mit der freien Transformation (Befehlstaste + T / Strg + T) die Größe des Bilds so, dass es sich vom unteren Rand der Leinwand bis knapp unter den oberen Rand der Fußzeile erstreckt, und halten Sie die Umschalttaste gedrückt, damit Sie die richtigen Verhältnisse beibehalten.

6. Die richtige Balance

Verwenden Sie das Dialogfeld 'Farbbalance' (Bild> Anpassungen> Farbbalance) - Schatten: +10 (R) +10 (G) -30 (B), um das Blau zu löschen und unsere 'herbstlichen' Farben zu erhalten. Mitteltöne: +100 (R) +50 (G) -60 (B); Highlights: +20 (R) +10 (G) -10 (B). Aktivieren Sie das Kontrollkästchen Helligkeit beibehalten.

7. Dezentes Leuchten

Die Ränder des Baumes sind immer noch etwas gezackt. Um sie zu mildern, doppelklicken Sie auf die Ebene, um die Ebeneneffekte aufzurufen, und fügen Sie ein subtiles schwarzes „inneres Leuchten“ hinzu. Fügen Sie nun ein noch subtileres schwarzes „äußeres Leuchten“ hinzu. Dies sollte gerade ausreichen, um den Baum vom Hintergrund abzuheben.

Corel Painter gegen Clip Studio Paint

8. Subtile Änderungen

Um den Baum herbstlicher erscheinen zu lassen, rufen Sie das Bedienfeld „Ebeneneffekte“ erneut auf und fügen Sie eine Farbüberlagerung hinzu. Wählen Sie die Farbe # 333300 und stellen Sie den Mischmodus auf Weiches Licht. Diese subtilen Ebeneneffekte haben das Erscheinungsbild unseres Baumbildes erheblich verbessert.

9. Füttere mich!

Blenden Sie die Feed-Layer-Gruppe ein und wählen Sie die darin enthaltene Leade-Layer aus. Spiegeln Sie mit dem Menü Bearbeiten> Transformieren> Vertikal spiegeln und ziehen Sie die Ebenengruppe unter die Fußzeile. Positionieren Sie die Elemente neu, sodass die Blätter und das Feed-Symbol als umgekehrte Version der Kopfzeile angezeigt werden.

10. Planen Sie die Struktur

Wie bei der Kopfzeile besteht unsere Fußzeile aus zwei Fußzeilen - eine in der anderen. Die äußere Fußzeile erstreckt sich über die gesamte Breite der Seite, und die innere Fußzeile (mit einer festen Breite) befindet sich im Inneren und enthält unseren gesamten Inhalt.

11. Bereiten Sie die Bilder für das Web vor

Sie benötigen nur drei Bilder: den Baum, das Feed-Symbol (mit dem Blatt) und ein 1px breites Repeater-Bild für die Hauptleiste. Da alle diese Bilder die volle Alpha-Transparenz verwenden, müssen Sie sie alle als PNG-24-Dateien speichern.

Öffnen Sie die Datei index.html in Ihrem Browser, um festzustellen, ob die Hauptfußzeile mit dem Inhalt darüber angezeigt wird. Machen Sie sich mit dem Code in index.html und style_12.css vertraut. Wir werden das Erscheinungsbild der Fußzeile schrittweise verbessern, indem wir verschiedene Stylesheets verwenden.

13. Von innen nach außen

Bevor wir etwas mit der Fußzeile machen können, müssen wir den Inhalt in die innere Fußzeile ziehen. Ändern Sie in Ihrer HTML-Datei die CSS-Referenz von style_12.css in style_13.css. Aktualisieren Sie Ihren Browser, um die vorhandenen Verbesserungen zu sehen.

Um Platz für unser Baumbild zu schaffen, müssen wir unseren Text verschieben. Es gibt zwei Elemente, die Text enthalten. Daher wird jedes Element als links schwebende Spalte angezeigt. Ändern Sie den Stylesheet-Verweis in style_14.css. Beachten Sie, dass wir eine haben
Element zum Löschen der Schwimmer.

Photoshop, wie man eine Form füllt

15. Platzieren Sie den Baum

Zum Platzieren des Bildes verwenden wir ein Element mit der Baumklasse. Öffnen Sie style_15.css, um den Code anzuzeigen, der die Stile für dieses Element definiert. Es befindet sich absolut innerhalb des Containers und wird bei negativer Positionierung direkt außerhalb des Blocks verschoben.

16. Bildersetzung

Das Das Element mit der Feed-Klasse, das den Link zu unserem RSS-Feed enthält, ist ähnlich wie der Baum positioniert. Öffnen Sie style_16.css und stellen Sie sicher, dass Sie display: block für dieses Element als festlegen Tags sind standardmäßig keine Elemente auf Blockebene.

17. Schöne Typografie

Unser Text sieht im Moment ziemlich schrecklich aus, da er auf den Standardeinstellungen des Browsers basiert. Aktualisieren Sie Ihre HTML-Datei mit einem Verweis auf style_17.css, und Sie werden den verbesserten Text bemerken, sobald Sie die Datei in Ihrem Browser aktualisieren. Die unterschiedliche Schriftart und Schriftgröße hilft bei der Unterscheidung zwischen Überschriften und Absatztext.

18. Credits

Zuletzt brauchen wir einen Stil für das Guthaben „Designed by“. Ich habe ein GIF meines Logos in der gleichen Breite wie eine der Spalten erstellt. Öffnen Sie style_final.css und beachten Sie, dass es absolut positioniert ist, sodass es genau dort sitzt, wo wir es möchten. Der Text wird durch Bildersetzung außerhalb des Bildschirms verschoben.

19. Fertig!

Öffnen Sie final.html, um das Endergebnis zu sehen: eine optisch ansprechende Fußzeile, die den Stil der Kopfzeile widerspiegelt und für sich allein gut steht. Der Inhalt stimmt mit dem obigen Raster überein, aber wir haben ihn interessant gemacht, indem wir einige der visuellen Elemente außerhalb der Blöcke verschoben haben.