In diesem Screencast befassen wir uns größtenteils mit dem orangefarbenen „Photostar“, der den Footer dominiert.
Wir erstellen den Stern in einer separaten Datei in Photoshop, damit wir ihn in der für das Web benötigten Größe erstellen können, nicht in der Größe, die in der Haupt-Photoshop-Datei am sinnvollsten ist. Wir machen ihn größer als er im Web ist, damit wir ihn verkleinern können und er auf Retina-Displays super scharf aussieht. Ja, vielleicht ein Bandbreitenproblem, weil zu viele Daten an viele Geräte gesendet werden, die sie nicht benötigen – aber hey, wir sind mit der geringen Anzahl von Bildern, die in diesem Design verwendet werden, bereits sehr gut aufgestellt, es ist sowieso ein Nettogewinn, und wir können jederzeit überarbeiten, wie das gemacht wird.
Wir beenden die Aufgabe, indem wir den Linklisten grundlegende Stile zuweisen, die Hälfte davon nach links und die andere Hälfte nach rechts ausrichten (mit rechtsbündiger Textausrichtung).
Wie immer großartig, Chris, nur ein Vorschlag bezüglich deiner Bildpfade usw. Warum nimmst du den Pfad nicht in eine Variable und tauschst ihn dann aus, wenn er live geht? Z.B.
$image-path: ('../images/'); .selector { background-image: url($image-path + "imagename.png"); // Where imagename.png is the name of you image. }Das könntest du mit all deinen Dateipfaden machen.
Compass hat dafür tatsächlich URL-Helfer: http://compass-style.org/reference/compass/helpers/urls/
Glücklicherweise referenziere ich nicht TONNEN von Bildern über CSS, es ist nicht allzu schwer, sie manuell zu verwalten. Aber ich sollte wahrscheinlich darauf umsteigen.