skywalk-webdesign.de
skywalk-webdesign.de
Gestaltung mit CSS
Gestaltung mit CSS

Mit box-shadow div-Elemente gestalten

Eigentlich kann man mit box-shadow nicht nur div-Elemente Gestalten, aber divs sind sicher das HTML-Element, auf das dieses Mal am häufigsten angewendet wird.

Box-Shadow zeichnet, wie der Name schon sagt, einen Schatten um ein HTML-Element.  Für diesen Schatten kann die horizontale und vertikale Länge, die Stärke des Blur-Effektes sowie die Schattenfarbe festlegen.

Syntax

box-shadow: Horizontale Länge Vertikale Länge  Blurstärke Schattenfarbe

Beim Firefox steht -moz-box-shadow, bei Google Chrome und Safari -webkit-box-shadow.

Browserunterstützung

Firefox Chrome Safari Opera Internet Explorer  
+3.5 +4.0 +3.1 +10.5 ???  

Beispiel

Text in einem schattierten div-Element

Effektvoller sieht box-shodow aus, wenn man den Schatten mit abgerundeten Ecken versicht. Darauf wurde hier verzichtet.

Quellcode zum Beispiel

.boxshadow1{
-webkit-box-shadow: 5px 5px 15px #dd0000;
-moz-box-shadow: 5px 5px 15px #dd0000;
box-shadow: 5px 5px 15px #dd0000;
margin:15px auto;
width:80%;
color:#FFFFFF;
background-color:#BB0000;
height:60px;
padding-left:15px;
padding-right:15px;
padding-top:5px;
padding-bottom:5px
}

kursiv

||© von skywalk-webdesign.de Burkhard Schlutt||Kontakt||Impressum||


Deprecated: Function ereg() is deprecated in /srv/www/httpd/phost/s/de/skywalk-webdesign/web/css/css3-box-shadow.php on line 207