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 
}