[CSS] Schatten um Objekte

Drucken
( 0 Votes ) 
Hauptkategorie: Programmieren Kategorie: CSS
Erstellt am 10.01.2013 Zuletzt aktualisiert am 03.05.2013 Geschrieben von Jonny132
Mithilfe der CSS3 - box-shadow Eigenschaft kann man um beliebige Objekte einen Schatten werfen.
Somit erhält das Objekt (div, image) eine tiefe bzw. einen 3D-Effekt.

Anwendung:
      #Beispiel
      {
        -moz-box-shadow: 10px 5px 5px #888888;
        box-shadow: 10px 5px 5px #888888;
        border: 1px solid;
        background-color:green;
        padding: 5px;
        margin: 20px;
      }
    <div id="Beispiel">
      Hier kommt der Inhalt, < br/>
      um den Sie den Schatten < br/>
      werfen wollen. 
    </div>
CSS Schatten um ein Div-Objekt
Damit ältere Versionen vom Firefox den Schatten auch korrekt darstellen können, könnt ihr, wie im Beispiel, die -moz-box-shadow - Eigenschaft auch noch einbauen.

Die box-shadow - Eigenschaft nimmt insgesamt 4 Werte entgegen.
Der erste sorgt für die Verschiebung des Schattens nach Rechts und der zweite nach Unten.
Der dritte Wert gibt das 'Fading' des Schattens an, also wieviel Pixel verwendet werden sollen um den Verlauf darzustellen.
Zu guter Letzt kann noch die Farbe des Schattens angegeben werden wobei #888888 für Grau steht. 

Info: wollt ihr, dass der Schatten nicht nach Rechts geht, sondern nach links, so könnt ihr einfach Negative Werte angeben bzw. ein Minus vor die Pixel-Werte stellen.

    Veröffentlichen Sie ihre Kommentare ...