Die benutzerdefinierte Header-Illustration für den Videobereich ist da, diesmal von Alyssa Nassner.
Wir investieren etwas Zeit in die Organisation der Photoshop-Datei und die Benennung von Ebenen und dergleichen, nur um organisiert zu bleiben und zu verstehen, was was ist. Wir speichern eine Kopie der Datei, um das Original nicht zu beschädigen.
Wir haben letztendlich vier Teile in diesem Header: den Hintergrund, den Titel und die linken und rechten „Reels“. Es ähnelt der Galerie, wo wir die Gruppen von Leuten auf beiden Seiten hatten.
Wir versuchen, ein wenig clever zu sein, indem wir das Reel wiederverwenden. Es ist genau dasselbe Bild, nur gespiegelt, also verwenden wir transformX(-1), um es umzudrehen. Das spart uns eine Bildanfrage.
Wir stoßen auf ein wirklich seltsames Problem, bei dem sich das linke Reel weigert, vom linken Bildschirmrand wegzugehen. Wir verbringen wahrscheinlich zu viel Zeit damit, uns darüber aufzuregen, warum es nicht funktioniert, und schaffen es in diesem Video letztendlich nicht.
Wir schreiben Media Queries, um die Reels auf kleinen Bildschirmen zu entfernen.
Nur ein kleiner Tipp für den Chrome Web Inspector: Wenn Sie mit Zahlen arbeiten und die Pfeiltaste gedrückt halten, um nach unten oder oben zu zählen, können Sie die Umschalttaste gedrückt halten, während Sie dies tun, und dann springen Sie in 10er-Schritten, wie in Photoshop.
Bezüglich des abgeschnittenen Bildes, ich bin mir keiner Lösung sicher, aber ich denke, das Problem liegt daran, dass das Bild gespiegelt ist, also ist der linke Rand jetzt der rechte Rand, und wenn Sie den negativen Rand hinzufügen, tritt er rechts statt links auf, wenn das Sinn ergibt?