Wie können Sie mit CSS einen "Knockout" -Effekt erzielen?
UPDATE - Ziemlich sicher, dass ich das herausgefunden habe. Der Code ist etwas lang, aber ich habe hier eine Seite nach oben geworfen, damit Sie die Quelle sehen können: Ссылка
Das Konzept basierte auf: Ссылка und wurde dann an meine Bedürfnisse angepasst.
Die Kopfzeile reagiert und ist ausgeschaltet. (Bitte ignorieren Sie die schlechte, 1 Minute responsive bg Image-Implementierung!). Diese Implementierung verwendet auch kein CSS3, also würde ich mir vorstellen, dass es nicht viele Probleme mit der Kompatibilität geben würde.
Das einzige Problem, das ich finde, ist, dass, wenn die Browserbreite eine ungerade Zahl (z. B. 1393px) in Chrome ist, eine 1px-Lücke zwischen der rechten Flüssigkeitssäule und der Hauptzentrumsäule besteht. Ich sehe dieses Problem nicht in der neuesten Version von Firefox, Internet Explorer oder wenn die Breite eine gerade Zahl ist (z. B. 1394 Pixel in Chrome). Irgendwelche Ideen?
Ursprüngliche Frage: Ich versuche, eine von mir entworfene Kopfzeile zu programmieren, kann aber nicht herausfinden, wie ich den gewünschten Effekt erzielen kann. Bitte schauen Sie sich das beigefügte Bild an (Nein, daran arbeite ich gerade nicht :) nur ein Beispiel!)
Das Foto ist ein reaktionsfähiges Foto in voller Breite. Die Kopfzeile hat die volle Breite, aber ihr Inhalt befindet sich in einem ansprechenden Raster, das keine willkürliche Größe (angezeigt durch die schwarzen Linien) überschreitet, sondern verkleinert werden kann. Ich kann das alles erreichen, aber was ich nicht herausfinden kann, ist, wie man die Kopfleiste transparent macht, wo das Logo sein würde. Mit anderen Worten, anstatt das Logo oben auf der Leiste zu haben, würde ich es gerne aus der Kopfzeile ausschneiden.
Ist das überhaupt möglich?
2 Antworten
Es gibt keine inhärente Unterstützung für Knockout-Effekte, daher müssen Sie den Text als Teil eines Bildes haben.
Dies ist am einfachsten, wenn der Hintergrund hinter dem Knockout-Effekt der feste Teil des Bildes ist. Sie können eine .png mit einem durchgehenden Hintergrund und eine Transparenz erstellen, an der Sie den Knockout-Effekt erzielen möchten, und css opacity verwenden, um die gesamte Kopfzeile teilweise transparent zu machen. Sie müssen die Kopfzeile mit mehreren Abschnitten einrichten, sodass die Abschnitte, die keine Bilder sind (d. H. Außerhalb der schwarzen Balken), eine Hintergrundfarbe aufweisen, während die Abschnitte mit Bildern dies nicht tun.
Sehr grob:
%Vor% nicht die schönste Lösung, aber die experimentelle css3 flexbox verwenden: (mit display: table fallback)
BITTE BEACHTEN SIE: Die Flexbox w3c-Spezifikation ist noch im Fluss und könnte sich ein drittes Mal ändern. Ich habe das nur in IE9 (beide IE9 und IE8-Modi. Funktioniert nicht im IE7-Modus) und Chrome 20 und 22
getestetEin paar kleine Änderungen: Ссылка und Sie haben Ihr 5 div Layout ohne Javascript.