div box nur links und rechts einen Schatten

C

cleicht

Grünschnabel
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?

Christiandiv_mit_schatten.jpg
 
So vielleicht?
Code: 
<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>
 
Zuletzt bearbeitet:
So kannst du es auch machen. Wenn's noch inerssiert.
Code: 
<!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>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück