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

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".