Schatten, aber nur link und rechts

[Bernd]

Hallo liebe CSS Freaks, ich bin ein eifriger Mitleser, und habe bis jetzt schon zig Lösungen aus diesem Forum gezogen. Nun habe ich eine Frage, auf die ich keine Lösung finde! Ich möchte gerne mittels CSS einen Schatten erzeugen der links und rechts erscheint, aber nicht unten und oben.

margin:0 auto;
width: 500px;
height: 500px;
padding:30px 20px 30px 20px;
background:#fff;

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;  

http://www.cssdesk.com/G5dVb

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

Benrs

[Jnnbo]

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/

[Auge]

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

[Bernd]

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

Bekomme ich auch einen Farbverlauf rein, so das der Effekt auch ein richtiger Schatten ist, so wird ja nur die Farbe eingeblendet. Obwohl das genau die richtige Richtung ist.

[Auge]

Hallo

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

Bekomme ich auch einen Farbverlauf rein, so das der Effekt auch ein richtiger Schatten ist, so wird ja nur die Farbe eingeblendet. Obwohl das genau die richtige Richtung ist.

Ja nee, eben nicht. Wie ich mehrfach schreib, gibt es so keinen Verlauf, keinen unerwünschten, aber eben auch keinen erwünschten.

Tschö, Auge