Wir haben die Markup für die Treehouse-Anzeige am oberen Rand der Seite, aber wir müssen noch etwas am Styling arbeiten. Wir beginnen mit der Baumgrafik selbst.
Wir überlegen, ob es cool wäre, Vektoren zu verwenden und als SVG auszugeben, da es scharf aussehen und eine kleine Dateigröße haben würde. Sehen Sie zu, wie ich mich in Illustrator abmühe, um eine schöne, saubere Vektorversion davon zu erhalten, und letztendlich scheitere. Vorerst entscheiden wir uns, es zu vergessen und es einfach zu einem Bild zu machen.
Es stellt sich heraus, dass Treehouse diese Marke sowieso nicht mehr verwendet, also muss ich sie bald aktualisieren, und ich werde mir auf jeden Fall Zeit nehmen, sie zu einer SVG zu machen, auch wenn ich sie neu zeichnen muss.
Vorerst machen wir ein PNG und fügen es mit einem CSS-Hintergrund in das Design ein. Wir skalieren es mit `background-size` stark herunter (obwohl ich mich wieder einmal durch die Verwendung von Prozentwerten verwirrt habe – denken Sie daran, wenn Sie einen Prozentwert verwenden, ist es ein Prozentsatz des übergeordneten Elements und kein Prozentsatz der Größe des Bildes selbst).
Wir erhalten die Farbgebung, Größenangaben und Positionierung. Nun ist der letzte Schritt, es im responsiven Design funktionsfähig zu machen.
Ist dieses Video nicht in HD gespeichert/aufgenommen oder hat das Vimeo-Embedding es ausgeschaltet?
(Tolle Sachen bisher übrigens)
Das war seltsam. Ich habe es erneut hochgeladen und es ist jetzt viel besser. Danke fürs Melden! Ich werde diesen Kommentar verbergen, nur weil er temporär war.
Ich habe immer noch ein Problem mit der Download-Datei. Sie hat eine wirklich geringe Qualität im Vergleich zu den anderen bisherigen Materialien.
Ja, die Dateigröße dafür ist seltsamerweise klein. Ich werde eine bessere Kopie hochladen.
Vielleicht sprechen Sie später darüber, aber warum `background-size`?
Ich nehme an, Sie haben nicht darüber gesprochen, welche Browser Sie anvisieren, aber IE8 unterstützt `background-size` nicht, und so wird diese Anzeige nicht sehr gut abwärtskompatibel sein.
Gibt es einen bestimmten Grund, warum Sie kein `![]()
`-Tag mit expliziter Höhe und Breite verwendet haben, die auf die halbe tatsächliche Größe des Bildes eingestellt sind? (Ist das geeignet, um Retina-Displays zu erhalten? Dann müssten Sie sich nicht mit der Größenänderung des Bildes befassen, wenn Sie die Breite des Containers ändern.)
Soweit ich weiß, sind beide in Bezug auf die Geschwindigkeit ziemlich gleich, oder? Beide erfordern eine zusätzliche HTTP-Anfrage, und da Sie Breite und Höhe auf Ihrem Bild festgelegt haben, sollte dies keine Neuanordnungen aufgrund von Reflow verursachen, wenn das Bild geladen wird.
Faire Punkte rundherum, aber...
1) IE 8 wird nicht unterstützt. Das kann ich mir auf einer Seite wie dieser leisten.
2) Ich betrachte `![]()
` als Inhalt in Form von Bildern, während dies nur ein Hintergrunddesign-Feature ist, das sich perfekt für CSS-Hintergrundbilder eignet.
Juhu, scheiß auf IE8! Ich liebe es.
Für ein Bild wie dieses, das eindeutig weniger als 256 Farben hat, sollten Sie es wahrscheinlich als indizierte PNG-8 (GIF-Ersatz) speichern. Sie können auch bis zu 256 Stufen von Alpha-Transparenz haben (im Gegensatz zu GIFs, die indizierte Transparenz haben).
Das Einzige, worauf Sie achten müssen, ist, dass ältere Versionen von Photoshop (v5 tat es immer noch nicht!!!) die Alpha-Transparenz nicht richtig speichern (soweit ich mich erinnere).
Fireworks macht es aber richtig... denn **Fireworks ist großartig**.
Chris, deine Screencasts sind unglaublich. Ich weiß, das kommt ein paar Jahre zu spät, aber ich dachte, du solltest daran erinnert werden, falls du dir diese Kommentare jemals ansiehst. "Das ist Kevin, der mich imösiert, er ist ein sehr netter Mann." Hahaha. Jedenfalls habe ich bis jetzt so viel gelernt und freue mich auf das, was in Zukunft kommt!