Ganz schön hintergründig

Schattig in Facetten

7.4.2011 von Dr. Florence Maurice

ca. 2:15 Min
Ratgeber
VG Wort Pixel
  1. Das Background- und Border-Modul von CSS3
  2. Flächendeckend
  3. Schattig in Facetten
  4. Bilder für Rahmen

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
Transparente Rahmen lassen sich über background-clip in Kombination mit rgba() erzeugen.
© Internet Magazin

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
box-shadow mit unterschiedlichem Grad an Verschwommenheit: 1px (links) und 5px (rechts).
© Internet Magazin

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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.