Ganz schön hintergründig

Schattig in Facetten

Background-clip und background-origin

Bis wohin geht die Hintergrundfarbe eigentlich - ist sie nur im inneren Bereich oder auch hinter dem Rahmen zu sehen? Diese Frage stellt sich, wenn der Rahmen durchlässig ist wie beim Rahmentyp dashed oder bei halb transparenten Rahmen. Bis wohin der Hintergrund reicht, bestimmen Sie in CSS3 über background-clip.background-clip: border-box bedeutet, dass der Hintergrund auch bis hinter den Rahmen reicht.

image.jpg

© Internet Magazin

Transparente Rahmen lassen sich über background-clip in Kombination mit rgba() erzeugen.

Bei background-clip: padding-box wird der Hintergrund nur im inneren Bereich, zu dem auch das padding gehört, gezeichnet. Bei der letzten Option background-clip: content-box erstreckt sich der Hintergrund nur über den innersten Bereich, nicht aber über den durch padding definierten Bereich. Diese Option wird allerdings von den derzeitigen Browsern weniger gut unterstützt.Bis Version 3.6 versteht Firefox diese Eigenschaft nur mit dem herstellerspezifischen Präfix -moz-background-clip. Außerdem heißen die möglichen Werte etwas anders: padding anstelle von padding-box und border anstelle von border-box. Ab Version 4 interpretiert Firefox die offiziellen Eigenschaften background-clip mit den korrekten Werten.Damit es in den Firefox-Versionen 4 und kleiner klappt, müssen Sie die Eigenschaften auf zwei Arten notieren:

-moz-background-clip: padding;
background-clip: padding-box;

background-clip für transparente Rahmen

Angenommen, Sie wollen eine Box mit transparentem Rahmen erstellen, bei dem der Hintergrund der Seite durchscheint. An sich ist das ja einfach, denn schließlich erlaubt border als Rahmenfarbe auch eine Angabe per rgba(), bei der Sie die Transparenz bestimmen können.Das Problem dabei ist nur, dass dann unter dem Rahmen die Box zu sehen ist - und nicht der Seitenhintergrund. Genau hier hilft background-clip: padding-box; denn damit können Sie festlegen, dass der Hintergrund der Box nur im inneren Bereich, das heißt nicht unter dem Rahmen zu sehen ist.Folgender Code definiert eine Box mit transparentem Rahmen und abgerundeten Ecken:

#box {
background-color: #F3F3F3;
-moz-background-clip: padding;
background-clip: padding-box;
border: 30px solid rgba(143, 128,
112, 0.7);
-moz-border-radius: 50px;
border-radius: 50px;
}

Neben background-clip ist in CSS3 auch background-origin definiert. Es bestimmt, wo ein Hintergrundbild beginnt. Auch hier sind drei Werte möglich: border-box, padding-box oder content-box. Firefox vor Version 4 versteht die Eigenschaft nur als -moz-background-clip. Außerdem heißen die Werte etwas anders, nämlich border, padding und content.

Schattig in Facetten

image.jpg

© Internet Magazin

box-shadow mit unterschiedlichem Grad an Verschwommenheit: 1px (links) und 5px (rechts).

Schatten um Elemente erzeugen eine Tiefe. Für Schatten um Boxen musste man normalerweise zu mehreren div-Elementen greifen. Und wenn der Schatten dann auch noch leicht verschwommen sein sollte, so waren tiefer verschachtelte div- Elemente notwendig oder gleich mehrere Hintergrundbilder. Das könnte man natürlich mit CSS3-Mitteln vereinfachen, denn zumindest braucht man nicht mehrere Elemente, um die vier Hintergrundbilder zuzuweisen. Aber es geht noch einfacher - ganz ohne Hintergrundbilder mit der Eigenschaft box-shadow:box-shadow verlangt vier Angaben, wie Sie sie in folgendem Beispiel sehen:

box-shadow: #042618 6px 6px 5px;

Die erste Angabe ist die Farbe des Schattens, darauf folgen drei numerische Werte:

  • Der erste legt die horizontale Abweichung fest, im Beispiel ist der Schatten um 6px nach rechts verschoben.
  • Der zweite Wert bestimmt den vertikalen Abstand zum Element, im Beispiel ist er 6px unterhalb des Elements platziert
  • Der letzte Wert - im Beispiel 5px - definiert den Grad der Verschwommenheit des Schattens. Je höher der Wert, desto verschwommener der Schatten.

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​".