Share
Was passiert, wenn der Hauptinhaltsbereich zwei bestimmte Hintergrundfarben benötigt: eine für den primären Inhalt und eine für die Seitenleiste? Wenn Sie jemals versucht haben, den Hintergrund auf jeden Container selbst anzuwenden, haben Sie zweifellos erkannt, dass Ihr Layout schnell fragmentiert wird, sobald der primäre Inhaltsabschnitt die Höhe der Seitenleiste überschreitet.
Im Allgemeinen besteht die Lösung darin, ein Hintergrundbild für das übergeordnete Element festzulegen und es so einzustellen, dass es vertikal wiederholt wird. Wenn wir jedoch mit CSS3-Farbverläufen klug werden, können wir den gleichen Effekt mit Nullbildern erzielen. Die Ironie dabei ist, dass wir CSS3-Farbverläufe verwenden, um einen Effekt zu erzeugen, der keinen Farbverlauf enthält! Lesen Sie weiter, um mehr zu erfahren.
Beginnen wir mit dem Erstellen eines lächerlich einfachen Layouts. Auf diese Weise können wir ein allgemeines Layoutproblem demonstrieren, das wir alle an einem oder anderen Punkt erfahren haben.
Erstellen Sie ein neues HTML-Dokument und fügen Sie Folgendes hinzu Karosserie Etikett:
Meine Kopfzeile
Primärer Inhalt.
Vergessen Sie nicht, dass Sie das benutzen können
KarosserieElement als Wrapper für Ihr Layout. Einfach ein setzenBreitedirekt zumKarosserie.
Was wir hier haben, ist ziemlich üblich. EIN Header Element enthält ein Heading-Tag; und dann haben wir eine Main div, das den primären Inhalt sowie das Seitenleiste.
Als Nächstes wollen wir dieses Layout ein bisschen gestalten. Da verwenden wir die Karosserie Element wie unser Wrapper, legen wir ein Breite und Hintergrundfarbe.
Körper Breite: 700px; Marge: auto; Hintergrund: # e3e3e3;
Nun werden wir den primären Inhalt und das Seitenleiste nach links bzw. rechts. Da wir nicht mit wirklichem Inhalt arbeiten, legen wir jedem Container eine Höhe fest, um die Illusion des Inhalts darzustellen. Dies selbst wird nicht genug sein; Wir müssen auch genau angeben, wie breit jeder sein sollte. Andernfalls nehmen sie aufgrund ihres Speicherplatzes den gesamten verfügbaren Platz ein Block Natur.
#primary float: left; Breite: 75%; Höhe: 500px; Hintergrund: rot; beiseite Anzeige: Block; / * Weil HTML5-Element ist * / float: right; Breite: 25%; Höhe: 500px; Hintergrund: grün;
Also, das alles sieht gut aus - für den Moment. Probleme treten jedoch auf, sobald die Höhe des Primärinhalts die Höhe des Seitenleiste. In den meisten Situationen ist dies typischerweise der Fall.
Um hinzugefügte Inhalte zu simulieren, vergrößern Sie die Höhe von #primary div sein 700px.
Normalerweise besteht die Lösung für diese Arten von Dilemmata darin, ein Hintergrundbild auf das übergeordnete Element anzuwenden (#Main) Element. Dies ist normalerweise ein kleiner Ausschnitt des Hintergrunds, der dann vertikal wiederholt wird.
#main … background: URL (klein / Scheibe / von / background.png) repeat-y;
Problem gelöst! Nun, nicht genau. Das funktioniert zwar. Sobald Sie sich jedoch entschlossen haben, eine Hintergrundfarbe zu ändern, müssen Sie zu Photoshop zurückkehren, um ein neues Hintergrundbild zu erstellen. Was für ein Langeweiler!
Eine andere übliche Lösung besteht darin, JavaScript zu verwenden, um die Breite jedes Containers dynamisch zu erkennen und diese dann auf dieselbe Höhe zu bringen. Beachten Sie, dass dies dazu erforderlich ist, dass Ihr Layout von der Aktivierung von JS abhängig ist.
Wenn wir Vordenker sein wollen, können wir CSS3-Gradienten verwenden, um diesen Effekt zu erzielen. Was sagst du dazu? "Aber Jeff, das sind Volltonfarben, keine Farbverläufe!" Richtig, aber ich zeige Ihnen einen kleinen Trick, den ich gelernt habe. Wenn Sie in einem CSS3-Verlauf zwei Stops an derselben Stelle erstellen, erhalten Sie am Ende zwei Volltonfarben. Das ist etwas verwirrend. lass mich demonstrieren.
Bevor Sie fortfahren, kehren Sie, wenn Sie mitarbeiten, zu Ihrem Projekt zurück und entfernen Sie die Hintergrundfarben. Sie werden nicht mehr benötigt. Jetzt fügen wir dem übergeordneten Element einen Hintergrundverlauf hinzu, #Main, stattdessen Container.
#main Hintergrund: -moz-linearer Gradient (links, rot, grün);
Also haben Sie das wahrscheinlich erwartet. Aber wie hilft uns das? Wir brauchen eine klare Trennung zwischen dem primären Inhalt und dem Seitenleiste.
Diesmal legen wir fest, dass sowohl das Rote als auch das Grüne Farbstopps sollte an der 75% Markierung platziert werden.
#main Hintergrund: -moz-linearer Gradient (links, rot 75%, grün 75%);
Ist das nicht großartig? Wir verwenden nicht nur einen Farbverlauf, um ironischerweise einfarbige Farben zu erzeugen, sondern auch die Höhen jedes untergeordneten Containers sind jetzt identisch.
Denken Sie daran, dass dies nicht ganz richtig ist. Sie haben die Illusion, dieselbe Höhe zu haben. In Wahrheit wenden wir jedoch nur einen Hintergrund auf das übergeordnete Element an. Das Seitenleiste ist noch kürzer; Du kannst es einfach nicht sagen.
Der letzte Schritt besteht darin, Webkit-Browser (Safari und Chrome) glücklich zu machen. Leider stimmen sie mit Mozilla hinsichtlich der korrekten Syntax zum Erstellen von Farbverläufen nicht ganz überein. Ihre Methode ist nicht ganz so prägnant wie die von Mozilla.
#main Hintergrund: -moz-linearer Gradient (links, rot 75%, grün 75%); Hintergrund: -webkit-gradient (linear, links oben, rechts oben, von (rot), Farbstopp (.75, rot), Farbstopp (.75, grün));
Wenn du an das gewöhnt bist
von()undzu()Funktionen, denken Sie daran, dass es sich lediglich um Hilfsfunktionen handelt, die aufFarbstopp ().
Farbstopp akzeptiert zwei Parameter:
Zu klären, Farbstopp (0,75, grün) bedeutet: "Bei 75% der Breite des Elements sollte die Farbe jetzt grün sein." Ja, die Syntax ist anders, aber die Konvertierung dauert nur wenige Sekunden.
Das ist alles dazu! Bitte denken Sie daran, dass dies CSS3-Techniken sind, dh IE wird in der Kälte gelassen. Beachten Sie jedoch: "Nicht alle Websites müssen in jedem Browser identisch aussehen."
Was denkst du? Verwenden Sie diese Methode, wenn Sie wissen, dass Sie eine Fallback-Farbe für den IE angeben müssen, oder verwenden Sie zur Verwendung eines Fallback-Images konditionale Anweisungen?
Accentsconagua