Hallo,

Ich möchte gerne mittels CSS einen Schatten erzeugen der links und rechts erscheint, aber nicht unten und oben.

vielleicht so?

<div class="schatten"></div>

.schatten {
  width: 300px;
  height: 200px;
  box-shadow: 0 0px 10px 0 #000;
  background-color: #ccc;
}

.schatten:before {
  content: '';
  position: relative;
  top: -7px;
  bottom: 0;
  height: 8px;
  background: white;
  left: -10px;
  width: 130%;
  display: block;
}

.schatten:after {
  content: '';
  position: relative;
  top: 191px;
  bottom: 0;
  height: 7px;
  background: white;
  left: -10px;
  width: 130%;
  display: block;
}

http://jsfiddle.net/rskvab9k/

Hallo

Ich möchte gerne mittels CSS einen Schatten erzeugen der links und rechts erscheint, aber nicht unten und oben.

box-shadow:   8px  0  10px  #aaa,

>                   -8px  0  10px  #aaa;
>  -moz-box-shadow:  8px  0  10px  #aaa,
>                    -8px  0  10px  #aaa;
>  -webkit-box-shadow:  8px  0  10px  #aaa,
>                    -8px  0  10px  #aaa;  

Den -moz-Block kannst du weglassen. Der war nur bis Firefox 3.6 notwendig. Der CSS-konforme Block soll als letzter notiert werden. Der Webkit-Block kann für alte Android-Geräte da bleiben (Android 2.x, 3). Die resultierende Reihenfolge:

-webkit-box-shadow: 8px 0 10px #aaa, -8px 0 10px #aaa;
box-shadow: 8px 0 10px #aaa, -8px 0 10px #aaa;

Mir scheint, das es nur Lösungen gibt, die immer einen gewissen Schatten unterhalb haben...

Wenn du die dritte Maßzahl für den Verlauf („10px“) weglässt, ist auch der Schatten oben und unten weg. Der Verlauf ist der Grund, warum immer ein gewisser Schatten unterhalb (und oberhalb) da ist. Allerdings ist der Schatten ohne Verlauf „messerscharf“, was vermutlich auch nicht gewünscht wird.

Kannst ja mal testen. Mit box-shadow: 8px 0 #aaa, -8px 0 #aaa; gibt es keine Schatten oben und unten, allerdings auch keinen Verlauf nach rechts und links.

Tschö, Auge