Box Shadow

Heute geht es um das Thema Schatten. Schatten können vielseitig eingesetzt werden, z.B. in Verbindung mit einem einer Box oder einem Bild. Anhand dieser Beispiele werde ich erklären wie man Schatten erstellt und entsprechend einstellt.

Allgemein gilt der Befehl:

CSS

-webkit-box-shadow: 3px 3px 3px 3px #8C808B;
box-shadow: 3px 3px 3px 3px #8C808B;

Somit werden alle gängigen Browser abgedeckt. Der IE7 und IE8 unterstützen diese Funktion nicht. Mit den „px“-Werten geben wir die Ausmaße des Schattens an, positive Werte geben der Box rechts und unten einen Schatten, negative „px“-Werte links und oben.

Wollen wir nun ein Objekt bzw. eine Box erstellen, in dem später ein Objekt liegt, öffnen wir eine div Element im HTML. Das Element erhält die ID „box“. Mit Hilfe der ID können wir im CSS den Schatten bestimmen. Dazu im CSS eine neue ID erstellen „#box“ und den oberen Code hinein kopieren. Jetzt haben wir eine Box mit Schatten erstellt! Testet es in der Demo!

HTML

<div id="box">Objektbox mit Schatten</div>

Beispiel Schattenbox

Wollen wir ein Bild mit einem Schatten versehen, gehen wir dazu genauso vor wie bei der Box. Wir geben dem Bild eine ID und können somit im CSS das Bild direkt ansprechen und einstellen.

CSS

#bild{  
-webkit-box-shadow: 3px 3px 3px 3px #8C808B;
box-shadow: 3px 3px 3px 3px #8C808B;
  }

HTML

<img id="bild" src="http://webcamsdemexico.net/cancun1/live.jpg" width="35%"/>

Beispiel Bildschatten

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s