Es gibt sieben verschiedene Hauptbereiche der Website außerhalb der Homepage. Daher habe ich sieben verschiedene Illustratoren für Designs eingestellt. Dies ist das erste, das wir uns ansehen und in die Website implementieren werden. Es ist der Galeriebereich der Website und er wurde von Erica Sirotich erstellt.
Wir ändern das HTML und CSS, um Platz für den Header oben zu schaffen, was wir im Wesentlichen mit Padding machen.
Wir nehmen einige Größenänderungen mit Photoshop vor, um die Illustration genau auf die gewünschte Größe zu bringen. Ziemlich groß für den Moment, aber wir werden wahrscheinlich in Zukunft intelligentere Lösungen für das Laden von Header-Grafiken in der passenden Größe für die jeweilige Bildschirmgröße entwickeln.
Ein kleiner Wohlfühl-Trick, den wir anwenden, ist das Hinzufügen einer Menge unterem Margin zum Seiten-Wrapper, sodass das Ende der Seite einen leeren Bereich unten hat, was dem Design eine Endgültigkeit verleiht (zumindest für jetzt, bis wir uns mit dem Footer beschäftigen).
Wir schließen den Galerie-Header schön in Position ab, aber wir haben noch etwas Arbeit daran zu erledigen, indem wir die kleinen blauen Personen-Illustrationen hinzufügen, die Erica als Teil dieser Illustration erstellt hat.
Hallo Chris. Ich liebe den Screencast und das Redesign.
Ich bin auf diese Methode gestoßen, Text zu verstecken, ohne Text-Einzug oder negative Top/Left-Werte zu verwenden.
Ich glaube, ich erinnere mich gelesen zu haben, dass die Browser immer noch eine Box von der erforderlichen Größe (-9999) außerhalb des Bildschirms rendern, wenn man Text-Einzug oder negative Werte verwendet, aber der folgende Code tut das nicht.
font: 0/0 a;<br/>text-shadow: none;<br/>
color: transparent;
Mehr Informationen dazu hier: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
In Wirklichkeit spielt das keine Rolle. Ja, eine Box wird außerhalb des Bildschirms gezeichnet, aber ich glaube, der einzige Browser, bei dem dies Leistungseinbußen verursachte, war das iPad 1 mit seiner ursprünglichen Software. Diese Methode tut das nicht, ist aber technisch ungültiges CSS, was eigene Gefahren birgt.
Compass hat eine coole Funktion, mit der Sie
image-url('bild-name-ohne-pfad.png')anstelle von einfachemurl()für Bilder verwenden können. Wenn sich also der Pfad ändert, müssen Sie ihn nur in der config.rb ändern.(Sie haben auch eine für andere Dinge, einschließlich Schriftarten (d.h.
font-url()), aber dieser Pfad scheint standardmäßig nicht in der config.rb definiert zu sein, Sie können ihn aber hinzufügen.)