Dieser Artikel wurde ursprünglich am 25. Februar 2008 veröffentlicht, wird aber jetzt komplett überarbeitet, um umfassender zu sein und moderne Techniken zu zeigen.
Die Seite von Jon Hick, Hicksdesign, ist dort, wo ich das Konzept eines „Körperrandes“ zuerst gesehen habe. In diesem Fall ist es ein sehr dezenter und schöner Effekt.
Merkmale eines Körperrandes
- Umschließt das gesamte Browserfenster, bleibt am Rand, unabhängig von der Bildschirmgröße
- Alle Kanten bleiben beim Scrollen der Seite an Ort und Stelle
- Der Inhalt verschwindet beim Scrollen der Seite unter den Rändern
Technik #1: Vier Divs
Der Weg, dies mit der tiefsten Browserkompatibilität zu erreichen, ist die Verwendung von vier Elementen. Hicksdesign macht es auf diese Weise, verwendet vier -Elemente und sagt dazu in einem HTML-Kommentar:
Ich verwende die b-Tag-Ränder, weil es nur visuelle Dinge ohne Bedeutung sind, also kann ich genauso gut den kleinsten Tag verwenden, den ich finden kann.
Auf jeden Fall ist dies präsentationsbasierte Markup, was nicht ideal ist. Wir werden hier einen Div verwenden.
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>Dann stylen wir mit CSS. Einige Eigenschaften werden von allen Elementen geteilt, einige nur vom oberen/unteren und linken/rechten, und einige sind einzigartig. Hier ist eine saubere Möglichkeit, das zu kodieren, ohne unnötige wiederholte Eigenschaften.
#top, #bottom, #left, #right {
background: #a5ebff;
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 15px;
}
#left { left: 0; }
#right { right: 0; }
#top, #bottom {
left: 0; right: 0;
height: 15px;
}
#top { top: 0; }
#bottom { bottom: 0; }Dies sollte in IE 7 und höher und fast jedem anderen guten Desktop-Browser einwandfrei funktionieren. Für IE 6, der keine feste Positionierung unterstützt, werden wir ihn einfach entfernen (kein Schaden, keine Foul-Abwehr), indem wir einen bedingten Kommentar im Kopf verwenden.
<!--[if lte IE 6]>
<style>#top, #bottom, #left, #right { display: none; }</style>
<![endif]-->Wir sollten ihn auch auf kleinen Bildschirmen (wahrscheinlich mobil) weglassen, die ebenfalls keine feste Positionierung handhaben.
@media
/* Fairly small screens including iphones */
only screen and (max-width: 500px),
/* iPads */
only screen and (min-device-width: 768px) and (max-device-width: 1024px)
{
#top, #bottom, #left, #right { display: none; }
}So bekommen wir den Effekt dort, wo wir ihn wollen, und nicht dort, wo wir ihn nicht wollen.
Technik #2: Pseudo-Elemente
Im obigen Beispiel benötigten wir vier einzigartige Elemente, um die Aufgabe zu erledigen. Aber das sind vier Elemente mehr als semantisch angemessen in unserem Dokument. Idealerweise würden wir null verwenden. Nun, weißt du was? Es gibt bereits zwei Elemente, die die Größe des Browserfensters haben: die <html>- und die <body>-Elemente. Mit den :before- und :after-Pseudo-Elementen darauf erhalten wir vier!
Wir würden die gleichen Eigenschaften und Werte wie oben verwenden, nur würden wir
html:before, html:after, body:before, body:after {
content: "";
position: fixed;
background: #a5ebff;
/* etc. */
}Harry Roberts hatte diese Idee auch und veröffentlichte sie auf CSS Wizardry.
Während die Browserunterstützung für Pseudo-Elemente ziemlich gut ist, ist sie nicht so gut wie bei Technik #1. **Ein größeres Problem** ist, dass es einen WebKit-Bug gibt, bei dem der Hintergrund eines Pseudo-Elements auf dem html-Element über den gesamten Viewport hinausläuft. Das macht die Verwendung von Pseudo-Elementen auf dem html-Element vorerst unmöglich.
Aber es gibt eine Lösung! Während die Semantik zählt!
Wir brauchen eigentlich keine vier einzigartigen Elemente, wir brauchen eigentlich nur zwei. Oben und unten müssen einzigartig sein, damit sie eine feste Position haben und nicht scrollen. Für links und rechts können wir buchstäblich einfach einen border am <body> verwenden.
body:before, body:after {
content: "";
position: fixed;
background: #900;
left: 0;
right: 0;
height: 10px;
}
body:before {
top: 0;
}
body:after {
bottom: 0;
}
body {
border-left: 10px solid #900;
border-right: 10px solid #900;
}Der gleiche Effekt, etwas weniger Browserunterstützung, viel semantischer.
Zum Spaß: Kottke.org Körperrand
Jason Kottkes Kottke.org hat einen ziemlich coolen Körperrand-Effekt.
Jason benötigt acht verschiedene Elemente und acht verschiedene Bilder (!), um dies zu bewerkstelligen. Da dieser Randstil nicht fest am oberen und unteren Rand des Viewports verbleibt (nur am oberen und unteren Rand des Inhalts), ist dies tatsächlich sehr einfach mit CSS3 umzusetzen.
Wir werden box-shadow auf dem <body>-Element verwenden und seine nützliche Fähigkeit, mehrere Schatten durch Kommas zu trennen. Hier ist er in seiner Gesamtheit mit
body {
padding: 40px;
overflow-x: hidden; /* For Opera */
-webkit-box-shadow:
inset #19d4ff 0 0 0 5px,
inset #18cdf7 0 0 0 1px,
inset #53dfff 0 0 0 10px,
inset #50d8f7 0 0 0 11px,
inset #8ce9ff 0 0 0 16px,
inset #88e2f7 0 0 0 17px,
inset #c5f4ff 0 0 0 22px,
inset #bfecf7 0 0 0 23px;
-moz-box-shadow:
inset #19d4ff 0 0 0 5px,
inset #18cdf7 0 0 0 1px,
inset #53dfff 0 0 0 10px,
inset #50d8f7 0 0 0 11px,
inset #8ce9ff 0 0 0 16px,
inset #88e2f7 0 0 0 17px,
inset #c5f4ff 0 0 0 22px,
inset #bfecf7 0 0 0 23px;
box-shadow:
inset #19d4ff 0 0 0 5px,
inset #18cdf7 0 0 0 1px,
inset #53dfff 0 0 0 10px,
inset #50d8f7 0 0 0 11px,
inset #8ce9ff 0 0 0 16px,
inset #88e2f7 0 0 0 17px,
inset #c5f4ff 0 0 0 22px,
inset #bfecf7 0 0 0 23px;
}Fehlerhinweis: Opera (Mac, 11.10) hat einen seltsamen Fehler, bei dem die Größe des Elements erweitert wird, um die Schatten außen zu berücksichtigen (obwohl die Schatten innen liegen). Dies löst unerwünschte Scrollbalken aus, da wir es auf einem Vollbild-Body-Element verwenden. Horizontale Scrollbalken können durch Ausblenden von overflow-x verborgen werden. Aber leider wird es immer noch einen kleinen Abstand am unteren Bildschirmrand geben.
Obwohl dies die geringste Browserunterstützung aller behandelten Themen hat, ist sie nicht schlecht: IE 9+, Fx 3.5+, Opera 10.5+, Chrome alle, Safari 3+
Es ist wahrscheinlich erwähnenswert, dass dieser Prozess nur dann wirklich nützlich ist, wenn Sie einen festen Breiten-/Höhenrand auf einer Seite wünschen, deren Inhalt die Seite nicht unbedingt ausfüllt. Andernfalls wäre es nicht viel sinnvoller, einfach den gesamten Inhalt in ein Div zu packen, ihm „margin: 10px“ zu geben und die Seitenhintergrundfarbe auf Ihre Randfarbe/Stil zu ändern?
Oh, ich sehe. Ich habe falsch gelesen, dass sie den Rand durch den gesamten sichtbaren Bereich wollten. In diesem Fall sage ich immer noch, dass es besser wäre, ein #page-container-Div zu verwenden, anstatt den Rand mit Divs zusammenzustellen. Wenn Sie wiederum genügend Inhalt auf jeder Seite sicherstellen können, um ein Browserfenster auszufüllen, kann der page-container „overflow: auto“ verwenden.
@Brent: Das ist ziemlich clever gedacht, aber das Problem dabei ist, dass Sie den unteren Rand nicht sehen, wenn die Seiteninhalte das Browserfenster vertikal überschreiten und scrollen müssen. Auf diese Weise erhalten Sie alle vier Ränder, egal was passiert.
Es ist auch erwähnenswert, dass diese Divs, da sie absolut positioniert sind, automatisch vertikal höher gestapelt werden (z-index) als alles andere auf der Seite, das nicht absolut positioniert ist. Sie werden also alles darunter „überdecken“.
Was ist mit der Verwendung eines Divs mit einem umlaufenden Rand, um die oberen, linken und rechten Ränder zu erhalten, und dann die Verwendung eines weiteren Divs, um den unteren Rand zu konstruieren? Ist das nicht semantischer?
Ich stimme Brent da teilweise zu, mit der Ausnahme, dass ich dem Body einen Padding von ‚0 10px‘ geben würde und zwei b-Tags für links und rechts hätte.
Das einzige Problem wäre wohl, wenn die Website horizontal scrollen müsste, aber das sollte ohnehin vermieden werden.
Brent fragte, was ich tun würde. :) Es ist großartig, die „Warum“ hinter bestimmten Techniken zu sehen, also danke.
Der Hicksdesign-Link hat einen zusätzlichen Alias darin :D
Danke Tim, korrigiert.
Hier sind einige zusätzliche Informationen: Der Rahmen oder Kastenrand wurde in einem Design verwendet und im CSS Zengarden-Buch „The Zen of CSS Design: Visual Enlightenment for the Web“ veröffentlicht, und Sie können das beeindruckende Design unter dieser URL ansehen.
http://www.csszengarden.com/?cssfile=069/069.css (von: Mike Davidson)
Versuchen Sie zu scrollen und bemerken Sie, dass der Rahmen folgt.
Vielleicht könnte man ihn für zusätzliche Raffinesse leicht transparent machen! Divs konnten sich aber nicht überlappen.
hm, warum benutzt du nicht einfach einen Div mit Rahmen statt 4?
Habe das noch nicht getestet, sollte aber gut funktionieren.
@Dejan: Man kann es mit einem Div mit Rahmen richtig aussehen lassen, indem man top/bottom/left/right auf 0px setzt und eine feste Position und einen Rahmen anwendet. **Aber das wird das gesamte Layout zerstören!**
Denn da absolut positionierte Elemente standardmäßig in der vertikalen Stapelreihenfolge (z-index) oben liegen, wird dieser Div über allem anderen auf der Seite liegen. Selbst mit einer transparenten Hintergrundfarbe liegt er immer noch „darüber“, was alle Links unbrauchbar macht und Text nicht auswählbar macht. Nicht gut!
@Arjan: Auch schlau gedacht, aber dieser Weg wird Ihnen auch nicht den unteren Rand geben, wenn Ihr Seiteninhalt vertikal das Browserfenster überschreitet und scrollen muss.
Ich dachte mir „könnte man dafür nicht einfach ein Wrapper-Div verwenden?“, aber ich sehe, dass Sie diesen unteren Rand immer anzeigen möchten. Anstatt 4 Divs für den Rand zu verwenden, könnten Sie nicht ein Wrapper-Div verwenden und die Ränder für oben, links und rechts festlegen und dann nur ein absolut positioniertes Div für Ihren unteren Rand verwenden? Das würde die CSS vielleicht noch einfacher machen und den Markup reduzieren!
Ich habe das gerade ausprobiert
und es gibt mir einen unteren Rand, egal ob mein Inhalt scrollt oder nicht, sowohl in IE als auch in FF. Keine zusätzliche Markup.
Das einzige kleine Problem ist, dass wenn nicht genügend Inhalt vorhanden ist, um die Seite scrollen zu lassen, die tatsächliche Höhe der Seite 100 % + 20 Pixel beträgt, da der Rand zur Höhe hinzugefügt wird.
Habe Ihren Code ein wenig modifiziert
Getestet mit ie10+chrome, funktioniert perfekt, danke.
@NatalieMac: Das sieht für mich so aus, als würde es den unteren Rand unabhängig davon aus dem sichtbaren Bereich schieben. Immer noch eine interessante Idee… Ich glaube, wir sind hier einer Möglichkeit näher, es mit weniger Markup zu machen. Wenn wir den oberen, rechten und linken Rand so machen können und dann nur einen festen unteren Rand, das wäre nur ein leeres Div nötig, viel besser.
Interessante Technik, ich würde normalerweise Polsterung auf die gleiche Weise verwenden, so dass sie definitiv zum Arsenal der verfügbaren Werkzeuge beiträgt.
Interessant..
Gut ..
danke.
koew,
Ich konnte keinen Grund sehen, warum man das wollen sollte, bis ich mir das von Ihnen gegebene Beispiel unter http://www.csszengarden.com/?cssfile=069/069.css angesehen habe.
Das ist ernsthaft schön.
Ja gut, wenn dein Design so aussieht!! Aber ich stimme voll und ganz zu, dass das vielleicht nur ein klein wenig nutzlos ist =). Es sei denn, jemand will diese Ränder wirklich wirklich!
Vielen Dank für diesen Css-Trick und ich setze Ihren Rss-Feed auf meine Lesezeichen ;)
Ralph
Ich habe einen Traum.
nur 1 div
Ein paar Jahre später... jetzt haben wir
pointer-events. Es lohnt sich, es anzusehen!Ähm, Chris... pointer-events? Ernsthaft? Ich dachte, von allen Leuten würdest du verstehen, dass das Predigen über Schnittstellenfunktionalität innerhalb von CSS übertrieben ist und bei JavaScript bleiben sollte.
Wenn Sie jedoch meinten, was ich denke, dass Sie meinten: #something:active wird in diesem Fall nicht funktionieren, da der Klick dann auf dem Element darüber und nicht auf dem fraglichen Link erfolgte. Außerdem, wenn es funktionieren würde, würden Sie seltsame Effekte wie Teile des Layouts erhalten, die auf dem Bildschirm „flackern“.
Ich mag pointer-events. Schulterzucken.
Es ist perfekt für den Code in diesem Thread. Legen Sie ein transparentes Div über die gesamte Seite, das den Rand erstellt, aber den Inhalt überdeckt und Dinge unklickbar macht. Pointer Events bedeuten, dass Sie hindurchklicken können. Das gehört meiner Meinung nach zu CSS. Ich bin bereit, eine Erwiderung zu hören. Bloggen Sie darüber!
Scheint in ff/mac zu funktionieren, wurde nicht in anderen Browsern/Betriebssystemen getestet.
Oh, es sieht so aus, als ob Sie ‚position: relative‘ für das Body-Element mit dem von mir geposteten CSS eigentlich nicht brauchen... trotzdem ist meine Lösung vielleicht nicht die magische Kugel, aber ich denke, sie ist es wert, in die Mischung geworfen zu werden.
Hallo
So interessant der Effekt auch sein mag, wenn er richtig eingesetzt wird, sollte darauf hingewiesen werden, dass die vier Divs keinerlei semantische oder strukturelle Bedeutung haben – also ein großes „Nein, nein!“. Aber wenn er zur progressiven Verbesserung des Markup verwendet wird, könnte er wirklich süß herauskommen. Danke, dass Sie ihn mit uns geteilt haben.
Ich stimme Adrian voll und ganz zu, Semantik sollte Vorrang haben, nicht das Styling, da CSS lediglich Ihr Markup ergänzen sollte. Versuchen Sie zuerst, das bereits verwendete Markup zu verwenden, und wenn das nicht geeignet ist, machen Sie es auf diese Weise.
Es gibt mehrere Techniken, um diesen Effekt mit weniger Markup zu erzielen, aber mein Instinkt sagt, dass diese auf weniger Probleme stoßen würde.
Danke fürs Teilen, Kumpel
Ahhhh, die „Semantik“-Leute. Sie kommen immer und schlagen Löcher in ansonsten großartige Designideen. Ich bin kein Usability- oder Semantikexperte, aber ist es immer notwendig, Ihre Layouts semantisch zu codieren? Ich verstehe einfach nicht, warum es ein so großes „Nein, nein!“ ist, sie nicht jedes Mal zu berücksichtigen, wenn man CSS schreibt. Wird es wirklich einen so negativen Einfluss haben, dass es das Erlebnis für den Besucher ruiniert? Ich würde wahrscheinlich von diesen Leuten die Hölle fangen, weil ich all das sage, aber komm schon, seid nicht immer so perfektionistisch.
Auf jeden Fall, auf einer ganz anderen Note, wollte ich sagen, dass Ihre Website leicht zu meinen Top-10-Favoriten zum Durchstöbern gehört und das Design einfach genial ist! Ich liebe diese Seite schon immer – machen Sie weiter so!
Coby, wenn es keinen Grund gibt, semantischen/bedeutungsvollen Code zu verwenden, könnten Sie dafür einfach eine Tabelle verwenden. Eine Tabelle wäre jedoch nicht logisch, da Sie (wahrscheinlich) keine tabellarischen Daten innerhalb des Rahmens anzeigen werden.
Ich benutze FF 4.0.1 und er ignoriert bei Ihrem letzten Beispiel mit mehrfarbigen Rändern oben und unten keine feste Positionierung.
Ich habe das Gefühl, etwas zu verpassen. Warum kann es nicht so gemacht werden?
Ein Pseudo-Element statt zweien, wodurch das zweite für andere Effekte übrig bleibt.
Ich bin mir nicht sicher, wozu das Padding da ist. Das Problem dabei ist, dass es eine große Schicht ist, die über allem liegt und von der Sie nicht durchklicken und mit der Seite interagieren können. Sie können versuchen, pointer-events: none; darauf anzuwenden, was helfen sollte, aber das ist gefährliches Terrain, da, wenn ein Browser das nicht unterstützt, die gesamte Seite ruiniert ist.
Wenn Sie eine solche Idee haben, erstellen Sie eine Testseite dafür! Das dauert nur eine Sekunde, Sie lernen, wir lernen, alle werden schneller besser.
Ich habe das getestet, aber nicht einmal daran gedacht, die Usability-Sachen wie das Klicken auf Links zu testen. Das Padding stammt aus einer früheren Version der Tests. Ich wusste, dass es einen Grund geben musste, warum die einfache Lösung nicht funktionieren würde!
Ich mag diesen Tipp. Danke.
Das Gleiche wie beim Regulären, etwas Neues.
Jetzt habe ich die Optionen „only screen and“ von CSS gelernt.
Das ist großartig :)
CSS macht so viel Spaß, besonders wenn man neue lustige Tricks wie diesen lernt.
Nur um ein weiteres Beispiel dieser Art hinzuzufügen: 24ways.org
Ich bin kein Fan von Körperrändern, sie ziehen zu viel Aufmerksamkeit auf sich.
Ist es notwendig, „inset“ in „-webkit-box-shadow“ einzufügen?
Wenn Sie das tun, geht der Schatten in das Element hinein, wenn Sie es nicht tun, geht er nach außen.
Noch nützlicheres Zeug, hoffe, es funktioniert..
Angesichts eines oberen Körperrandes mit einem vorherigen Artikel über Glow Form <https://css-tricks.de/glowform/> kann die Seite dies haben <http://www.pushinpixels.co.uk/index.html> nur in Webkit gibt es Animation, aber wir haben einen Fallback für andere.
Funktioniert das Hinzufügen eines Rahmens zum html-Element nicht?
@Nils, nein, es wird nicht auf die gleiche Weise funktionieren, da der obere und untere Rand mit dem Inhalt wegscrollen. Allerdings…
@Chris Coyier, ich weiß, dass dies vielleicht über den Rahmen dieses Artikels hinausgeht, aber das Hinzufügen der Randfarbe als Hintergrund des html-Elements und das Hinzufügen von Margin und Hintergrundfarbe zum Body-Element bietet einen guten Fallback für kleinere Bildschirme und mobile Geräte. Es bietet mehr vertikalen Platz auf kleineren Bildschirmen und beeinträchtigt mobile Safari nicht, wie es die fest positionierten Elemente tun. Es könnte sogar als Fallback für Browser verwendet werden, wo feste Positionierung und Pseudo-Elemente nicht unterstützt werden.
Man könnte argumentieren, dass es sich um ein geringfügiges Detail handelt, aber ich denke, dass eine solche Art von Fallback ein konsistenteres Gefühl vermittelt.
Diese Seite hat auch einen Körperrand.
ibuypink.com
Er hat die Ränder in eine unsortierte Liste gepackt und die Listenelemente Klassen für jede Seite zugewiesen.
Es ist kein großer Unterschied, aber mir gefällt die Idee, eine unsortierte Liste anstelle von Divs zu verwenden.
Vielleicht funktioniert diese Idee besser, und Sie bräuchten nur ein zusätzliches Element.
Sie setzen das Element auf fixiert, automatische Breite und dann links:10, rechts:10, oben:10, unten:10 und geben ihm einen 10px Rand. Würde das nicht funktionieren?
Es funktioniert, sicher funktioniert es, aber man kann nichts anklicken, da das neue Element es vermeidet. Zusätzlicher Hinweis: Sie müssen einen Wert von 0px für links, rechts, oben und unten angeben.
Beim Wechsel zwischen der kottke.org-Demo und dem tatsächlichen kottke.org habe ich einige Unterschiede in den Metriken festgestellt. Die folgenden Modifikationen replizieren die ursprüngliche Seite Pixel für Pixel.
Schöner Artikel! Und was ist mit so etwas?
Ich habe es nicht in Opera getestet, aber ich denke, ich muss nur die folgende Zeile hinzufügen, wenn es kaputt geht.
overflow-x: hidden; /* Für Opera */
Hier der Code
body:after {
content:" ";
display: block;
position: absolute;
width: 100%;height: 100%;top:0;
box-shadow: inset -20px -20px 0 pink,
inset 20px 20px 0 pink;
/* z-index: -1; einfach auskommentieren, um dies als Teil des Hintergrunds festzulegen */
padding: 60px; /* eventuelles Padding, 40px + 20px des inneren Box-Shadow */
position: fixed;
}
Ich platziere dies normalerweise, wenn ich einen dezenten inneren Schatten auf einer wiederholten Textur wünsche, aber ich denke, es ist auch geeignet, um einen Körperrand zu erzielen.
Lassen Sie mich wissen, was Sie davon halten!
Mit freundlichen Grüßen,
raozuzu :)
Dieser Artikel zeigt, wie man einfache Dinge verkompliziert… Um dieses Problem zu lösen, habe ich in Firebug eingegeben:
body {border:10px solid #000}und<div style="position: fixed; width: 100%; height: 10px; background: #000; left: 0; bottom: 0"></div>. Und es funktioniert. Ich denke, die einfachsten Lösungen sind die besten.Wirklich schönes Tutorial! Das bedeutet mir sehr viel. Ein schöner Anfang für Anfänger. Danke, dass Sie sich die Zeit genommen haben, all das zu tun!
Hallo, wie kann ich einen Rand (mit einem Bild oder besser gesagt einer Reihe ähnlicher Bilder) um meine Webseite haben? Jemand hat den unten gezeigten Code vorgeschlagen, aber er funktioniert nicht richtig.
Das ist alles, was Sie brauchen.
Danke dafür, hat sehr geholfen! Das Einzige, was ich nicht hinbekommen habe, war ein fester unterer Rand, bei dem ich den Inhalt darin noch scrollen konnte, ohne dass er verschwand. Deshalb habe ich ihn ein wenig modifiziert und ein Div als festen unteren Rand hinzugefügt.
Chris, es ist eine großartige Technik, aber wenn die Seite nicht viel Inhalt hat, passt der Rand am Body nicht vertikal. Um das zu lösen, habe ich einfach diese Regel in CSS hinzugefügt.
Das macht den Trick auch dann, wenn wir nicht viel Inhalt auf der Seite haben.
Alles Gute