SchreibMalWas

Boxschatten

"Heute möchte ich mich mit dem komplizierten Thema Boxschatten aus CSS3 beschäftigen.
Boxschatten sind ähnlich, wie die Textschatten aus dem vorherigem Tutrial.

Boxschatten  werden mit der CSS-eigenschaft box-shadow erzeugt. Mit ihr kann man coole 3d-effekte erzeugen.

CSS3-standardeigeschaft:
<div id="box">Box mit schatten</div>
<style type="text/css">
#box{box-shadow:7px 7px 5px #000000;}
</style>
Erklärung:
nach der Eigenschaft box-shadow stehen hier 4 Angaben:
Die 1. und die 2. Angabe bestimmen den Versatz des Schattens zur Box in px.
Hier sind es 7px Versatz richtung rechts und 7px Versatz richtung unten.
Die 3. Angabe bestimmt den Übergangsbereich (z.b. 5px) und mit der 4. Angabe wird die Schattenfarbe bestimmt.

Es lassen sich auch 4 Angaben machen:
Hierbei bestimmen die ersten 2 Angaben wieder den Versatz.
Mit der 3. Angabe wird wieder die Länge des Farbverlaufs im Schatten festgelegt.
Die 4. Angabe legt die Größendifferenz des Schattens zur Box fest. (so können Boxen, die optisch weit vorgeholt werden z.b. einen kleineren Schatten bekommen, um einen Fluchtpunkt zu simulieren.)
Die 5. Angabe dient wieder zur Farbbestimmung.

Boxschatten werden jedoch nicht automatisch in jedem Browser angezeigt. Deshalb sind hier wieder Browserspezifische Angaben zu machen:
Code:
<div id="box">Box mit schatten</div>
<style type="text/css">
#box{-moz-box-shadow:7px 7px 5px #000000;
-webkit-box-shadow
:7px 7px 5px #000000;
box-shadow
:7px 7px 5px #000000;}
</style>
Nun wird der Code in allen neuen Browsern richtig dargestellt

Jedoch giebt es eine Ausnahme: Diese Eigenschaft vom Erzfeind des Webdesigners, dem Internetexplorer grundsätzlich nicht umgesetzt.
Hierzu giebt es jedoch einen Filter als Ersatz:
Code:
#box{ filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=5);}
Erklärung:
color bestimmt die Farbe des Box-schattens, Direction, die Richtung des Schattens in ° und mit Strength wird Der Übergangsbereich eingestellt.
Hier lassen sich auch mehrere Angaben kombinieren.
Hierzu fügt man weitere Schatten einfach vor dem ; ein:
Code:
#box{ filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=5)
progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=225, Strength=5); }
Hier werden 2 Schatten in 2 Richtungen kombiniert. Es können biliebig viele Schatten eingestellt werden.

Um die Box noch ein wenig hervor zu heben, hilft es einen Rahmen um diese herum zu erstellen:
Code:
border-width:1px;
border-style:solid;
border-color:blue;
...erstellt einen 1px dicken, durchgezogenen, blauen Rahmen.
Mehr Zum Thema Rahmen: >>Hier klicken<<

Nun sind wir so weit, um ein mal alles zusammen zu fassen:
Code:
<div id="box">Box mit schatten</div>
<style type="text/css">
#box{-moz-box-shadow:7px 7px 5px #000000;
-webkit-box-shadow
:7px 7px 5px #000000;
box-shadow
:7px 7px 5px #000000;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=5)
progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=225, Strength=5); border-width:1px;
border-style:solid;
border-color:blue;
}
</style>
...und ein Beispiel funktioniert jetzt endlich auch:
Box mit schatten



Auch in den anderen Browsern können mehrere Schatten eingestellt werden.
Hierbei werden die Verschiedenen Angaben, wie auch bei text-shadow, mit Kommatas getrent:
Code:
-moz-box-shadow: 10px 10px green, -10px -10px blue, 0px 0px 5px 5px red;
-webkit-box-shadow: 10px 10px green, -10px -10px blue, 0px 0px 5px 5px red;
box-shadow: 10px 10px green, -10px -10px blue, 0px 0px 5px 5px red;
Hier werden ein Grüner Schatten nach unten rechts, ein blauer Schatten nach oben Links und ein roter Schatten in alle Richtungen kombiniert.
Beispiel:

Box mit schatten

Hier wird beim blauen und beim grünen Schatten die 3. Angabe für den Übergang weg gelassen, so entsteht KEIN Farb-übergang.


Es lassen sich auch Schatten nach innen in die Box hinein festlegen. Hierzu wird der Wert inset einzeln vor die restlichen Angaben gesetzt.
Code:
-moz-box-shadow: inset 7px 7px 5px #000000;
-webkit-box-shadow
: inset 7px 7px 5px #000000;
box-shadow
: inset 7px 7px 5px #000000;
Beispiel:
Box mit Schatten
Ein gutes Beispiel für Boxen mit Schatten nach innen finden Sie hier: schreibmalwas-soziales Netzwerk.




Kommentar zu dieser Seite hinzufügen:
Ihr Name:
Ihre Homepage:
Ihre Nachricht:

Sie sind der 28687 Besucher auf Schreibmalwas-homepagetools Statistiken
=> Willst du auch eine kostenlose Homepage? Dann klicke hier! <=
"