Ganz schön hintergründig

Das Background- und Border-Modul von CSS3

Viele neue Tricks und Effekte sind mit dem in CSS3 definierten Hintergrund- und Bordermodul möglich, das inzwischen von allen aktuellen Browsern unterstützt wird.

  1. Das Background- und Border-Modul von CSS3
  2. Flächendeckend
  3. Schattig in Facetten
  4. Bilder für Rahmen
internet, webdesign, border-modul, background-modul, modul, css3

© Internet Magazin

internet, webdesign, border-modul, background-modul, modul, css3

Das Rahmen- und Hintergrundmodul von CSS3 ist relativ stabil. Es befindet sich im Status "Last Call", der nächste Schritt ist dann die "Candidate Recommendation". Und es bietet eine Fülle an neuen Optionen - weit mehr als nur borderradius -, welche die Arbeit mit CSS vereinfachen und richtig Spaß machen.

Mehr ist besser

Eine zentrale Regel in CSS 2.1 besagt, dass pro Element nur ein einziges Hintergrundbild möglich ist. Für manche Effekte braucht man jedoch mehrere Hintergrundbilder - beispielsweise bei der Sliding-Door-Technik für Tabs oder auch beim Parallax-Effekt. Das bedeutet: tief verschachtelte div-Container.Mit CSS3 hat sich das erübrigt: Sie können einem Element beliebig viele Hintergrundbilder zuweisen. Hierfür schreiben Sie die Hintergrundbilder in der üblichen Syntax mit url(), zwischen die einzelnen Hintergrundbilder setzen Sie ein Komma.

background-image: url(bild1.png),
url(bild2.png), url(bild3.png);

Entscheidend und vielleicht nicht ganz intuitiv ist die Zeichenreihenfolge: Das Hintergrundbild, das Sie zuerst angeben, ist dem Betrachter am nächsten, das heißt am weitesten oben. Das als Zweites angegebene Hintergrundbild befindet sich in der Ebene dahinter und so weiter.Standardmäßig werden Hintergrundbilder gekachelt. Soll sich das anders verhalten, verwenden Sie wie gewohnt background-repeat, aber ebenfalls mit mehreren Werten:

background-repeat: no-repeat,
repeat-y, repeat;

Damit wird bei drei angegebenen Hintergrundbildern das erste nur einmal dargestellt, das zweite auf der Y-Achse wiederholt und das dritte gekachelt.Zusätzlich zu diesen Angaben ist für die Wiederholung space und round vorgesehen, diese werden aber derzeit noch nicht von den Browsern unterstützt.Wenn Sie bei background-repeat weniger Werte angeben, als Sie Hintergrundbilder bei background-image bestimmt haben, so werden die Angaben wiederholt. Eine Angabe gilt dann für alle drei Elemente. Bei zwei Angaben gilt die erste Eigenschaft auch für das dritte Hintergrundbild.Andere Eigenschaften wie die Positionen der mehrfachen Hintergrundbilder spezifizieren Sie ebenfalls über eine kommaseparierte Liste.

Parallax-Effekt

Ein schönes Beispiel für den Einsatz von Hintergrundbildern mit 3D-Wirkung ist der Parallax-Effekt. Sie sehen ihn beispielsweise bei silverbackapp.com , wenn Sie die Größe des Browserfensters verändern. Dann bewegen sich die Blätter in verschiedenen Geschwindigkeiten. Die Blätter, die näher am Betrachter sind, bewegen sich schneller, die weiter entfernten langsamer.

internet, webdesign, border-modul, background-modul, modul, css3

© Internet Magazin

Parallax-Effekt ohne zusätzliche Elemente durch CSS3: Die verschiedenen Sterne bewegen sich bei einer Größenänderung des Browserfensters in unterschiedlichen Geschwindigkeiten.

Möglich wird dieser Effekt durch mehrfache transparente Hintergrundbilder, deren Position in Prozent angegeben ist. Damit hängt die eigentliche Position der Hintergrundbilder von der Größe des Browserfensters ab. Und eine Vergrößerung oder Verkleinerung des Browserfensters bewirkt eine Verschiebung der Hintergrundbilder, was als Bewegung wahrgenommen wird.Für den ursprünglichen Parallax-Effekt in Zeiten vor CSS3 waren mehrfache div- Elemente notwendig, die auf die Größe des Browserfensters gestreckt werden mussten. Nun geht das einfacher: Sie weisen direkt dem body-Element die Hintergrundbilder zu.Wenn Sie die transparenten Bilder - im Beispiel sind es Sternenbilder - erstellt haben, genügen ein paar Zeilen, und der Parallax- Effekt ist komplett:

body {
background-color: #003;
background-image: url(sterne3.png),
url(sterne2.png), url(sterne.png);
background-position: 85% 75%, 30%
20%, 10% 15%;
}

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…