# div box nur links und rechts einen Schatten



## cleicht (26. Mai 2014)

Hallo,

ich versuche bei div boxen nur links und rechts einen Schatten anzuwenden. Mit css3 Box Shadow geht das nicht, da es ja einen realen Schlagschatten ergibt, der auch unten und oben angezeigt wird (je nach Position).

Anscheinend komm ich nicht darum herum ein png Schatten Image einzubauen. Aber wie kann ich das machen? Ich nutzte Bootstrap 3, die div´s sind die "container"  also z.B. header, main, footer die untereinander angeordnet sind. also links und rechts noch einen Div dran docken ist nicht so einfach.

Wie löst Ihr das?

Christian


----------



## SpiceLab (26. Mai 2014)

Schau dir mal Multiple Backgrounds with CSS3 an


----------



## djheke (26. Mai 2014)

So vielleicht?

```
<div style="overflow:hidden;padding:0 10px;float:left;">
<div style="box-shadow:0px 0px 10px  #000;margin: 0;padding:5px;">
<h1>Hallo Welt</h1>
<p>Hallo Welt</p>
</div>
</div>
```


----------



## Jan-Frederik Stieler (26. Mai 2014)

Hi,
fall du noch etwas kreatives mit einer CSS3 Lösung suchst: http://jsbin.com/cimis/2/edit
Hier wird sich nur das Problem stellen das du für jeden Div-Bereich eigene :before und :after erstellen musst wegen der top-Angabe.

Grüße


----------



## djheke (27. Mai 2014)

So kannst du es auch machen. Wenn's noch inerssiert.

```
<!doctype html>
<html>
<head>
<title>Beispielseite</title>
<meta charset="utf-8">
<style>

.shadow {
 margin:50px; /* Nicht notwendig*/
 float:left;
 box-shadow: -5px 5px 5px #bbb,
  5px 5px 5px #bbb;
   
}

.shadow h2 {
 margin:0;
 padding:5px;
}

.no_shadow {
 margin:0 0px -9px 0px;
 padding:5px 5px 12px 5px;
 background:#fff;
}

</style>
</head>
<body>

<article class="shadow">
<h2>Hallo Welt</h2>
<p class="no_shadow">Hallo Welt</p>
</article>

</body>
</html>
```


----------

