web-dev-qa-db-de.com

schatten nur unten css3

Gibt es eine Möglichkeit, den Schatten nur auf die Unterseite zu werfen? Ich habe ein Menü mit 2 Bildern nebeneinander. Ich möchte keinen rechten Schatten, weil er das rechte Bild überlappt. Ich mag es nicht, Bilder dafür zu verwenden, also gibt es eine Möglichkeit, sie nur auf der Unterseite abzulegen: 

box-shadow-bottom: 10px #FFF; oder ähnlich?

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
207
damage000

UPDATE 4

Wie Update 3, jedoch mit modernem CSS (= weniger Regeln), so dass keine spezielle Positionierung auf dem Pseudoelement erforderlich ist.

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content:"";
    position:absolute;
    width:100%;
    bottom:1px;
    z-index:-1;
    transform:scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}
<div id="box" class="box-shadow"></div>

UPDATE 3

Alle meine vorherigen Antworten verwendeten zusätzliches Markup, um diesen Effekt zu erzielen, der nicht unbedingt benötigt wird. Ich halte dies für eine viel sauberere Lösung ... der einzige Trick besteht darin, mit den Werten zu spielen, um die richtige Positionierung des Schattens sowie die richtige zu erzielen Stärke/Deckkraft des Schattens. Hier ist eine neue Geige mit Pseudo-Elementen :

http://jsfiddle.net/UnsungHero97/ARRRZ/2/

HTML

<div id="box" class="box-shadow"></div>

CSS

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

UPDATE 2

Anscheinend können Sie dies mit nur einem zusätzlichen Parameter für das Box-Shadow-CSS tun, wie alle anderen gerade betont haben. Hier ist die Demo:

http://jsfiddle.net/K88H9/821/

CSS

-webkit-box-shadow: 0 4px 4px -2px #000000;
   -moz-box-shadow: 0 4px 4px -2px #000000;
        box-shadow: 0 4px 4px -2px #000000;

Dies wäre eine bessere Lösung. Der zusätzliche Parameter, der hinzugefügt wird, wird wie folgt beschrieben:

Die vierte Länge ist eine Spreizdistanz. Positive Werte bewirken, dass sich die Schattenform um den angegebenen Radius in alle Richtungen ausdehnt. Negative Werte bewirken, dass sich die Schattenform zusammenzieht.

AKTUALISIEREN

Schauen Sie sich die Demo bei jsFiddle an: http://jsfiddle.net/K88H9/4/

Ich habe ein "Schattenelement" erstellt, das sich hinter dem eigentlichen Element verbirgt, für das Sie einen Schatten möchten. Ich habe die Breite des "Schattenelements" genau auf das Zweifache des von Ihnen angegebenen Schattens reduziert. dann habe ich es richtig ausgerichtet.

HTML

<div id="wrapper">
    <div id="element"></div>
    <div id="shadow"></div>
</div>

CSS

#wrapper {
    width: 84px;
    position: relative;
}
#element {
    background-color: #3D668F;
    height: 54px;
    width: 100%;
    position: relative;
    z-index: 10;
}
#shadow {
    background-color: #3D668F;
    height: 8px;
    width: 80px;
    margin-left: -40px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    z-index: 5;
    -webkit-box-shadow: 0px 2px 4px #000000;
       -moz-box-shadow: 0px 2px 4px #000000;
            box-shadow: 0px 2px 4px #000000;
}

Ursprüngliche Antwort

Ja, Sie können dies mit derselben Syntax tun, die Sie angegeben haben. Der erste Wert steuert die horizontale Positionierung und der zweite Wert steuert die vertikale Positionierung. Setzen Sie einfach den ersten Wert auf 0px und den zweiten auf den gewünschten Versatz wie folgt:

-webkit-box-shadow: 0px 5px #000000;
   -moz-box-shadow: 0px 5px #000000;
        box-shadow: 0px 5px #000000;

Weitere Informationen zu Box-Schatten finden Sie in den folgenden Abschnitten:

Ich hoffe das hilft.

225
Hristo

Verwenden Sie einfach den Spread-Parameter, um den Schatten kleiner zu machen:

.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}
<div class="shadow">Some content</div>

Live-Demo: http://dabblet.com/Gist/a8f8ba527f5cff607327

Um keinen Schatten an den Seiten zu sehen, muss der (absolute Wert des) Ausbreitungsradius (4. Parameter) dem Unschärfekreis (3. Parameter) entsprechen.

61
Lea Verou

Wenn Sie im Hintergrund eine feste Farbe haben, können Sie den Seitenschatteneffekt mit zwei maskierenden Schatten ausblenden, die dieselbe Hintergrundfarbe und Unschärfe = 0 haben. Beispiel:

box-shadow: 
    -6px 0 white,         /*Left masking shadow*/
    6px 0 white,          /*Right masking shadow*/
    0 7px 4px -3px black; /*The real (slim) shadow*/

Beachten Sie, dass der schwarze Schatten der letzte sein muss und eine negative Streuung (-3px) aufweist, um zu verhindern, dass er über die Ecken hinausragt.

Hier die fiddle (Ändern Sie die Farbe der Maskierungsschatten, um zu sehen, wie wirklich funktioniert).

enter image description here

20
T30

Ich denke, das ist es was du willst?

.shadow {
  -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  box-shadow: 0 0 0 4px white, 0 6px 4px black;
}
<div class="shadow">wefwefwef</div>

5
James T

Es ist immer besser, die Spezifikationen zu lesen. Es gibt keine box-shadow-bottom -Eigenschaft, und da Lea darauf hinweist, sollten Sie die Eigenschaft ohne Präfix am Ende nach den vorangestellten setzen.

So ist es:

.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}
<div class="shadow">Some content</div>

5
Misha Reyzlin

Wie wäre es einfach mit einem enthaltenden Div, bei dem der Überlauf auf versteckt gesetzt ist und am unteren Rand etwas Polsterung vorhanden ist? Dies scheint die einfachste Lösung zu sein.

Es tut mir leid zu sagen, dass ich selbst nicht darüber nachgedacht habe, sondern es gesehen habe woanders .

Wenn Sie ein Element zum Umbrechen des Elements verwenden, das den Box-Shadow und einen Überlauf erhält: Verborgen auf dem Wrapper können Sie den zusätzlichen Box-Shadow verschwinden lassen und dennoch einen verwendbaren Rand haben. Dies behebt auch das Problem, bei dem das Element aufgrund der Streuung scheinbar kleiner ist.

So was:

#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }

Inhalt geht hier

Immer noch eine clevere Lösung, wenn es um reines CSS geht!

Wie gesagt von Jorgen Evens .

2
Ben

Ich brauchte auch einen Schatten, aber nur unter einem Bild und setzte etwas links und rechts ein. Das hat für mich funktioniert:

.box-shadow {
   -webkit-box-shadow: 5px 35px 30px -25px #888888;
      -moz-box-shadow: 5px 35px 30px -25px #888888;
           box-shadow: 5px 35px 30px -25px #888888;
}

Das Element, auf das dieses Element angewendet wird, ist ein seitenweites Bild (980px x 300px).

Wenn es beim Fummeln mit den Einstellungen hilft, werden sie wie folgt ausgeführt:

horizontaler Schatten, vertikaler Schatten, Unschärfeabstand, Ausbreitung (d. h. Schattengröße) und Farbe.

1
Chris9

Sie können auch clip-path verwenden, um alle überlaufenden Kanten auszuschneiden (auszublenden), mit Ausnahme derjenigen, die Sie anzeigen möchten:

.shadow {
  box-shadow: 0 4px 4px black;
  clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}

Siehe Clip-Path (MDN) . Die Argumente für polygon sind der obere linke Punkt, der obere rechte Punkt, der Punkt rechts unten und der Punkt links unten Punkt. Indem Sie die untere Kante auf 200% setzen (oder eine Zahl, die größer als 100% ist), beschränken Sie Ihren Überlauf nur auf die untere Kante.

1
theengineear

Dieser Code-Stift (nicht von mir) zeigt eine sehr einfache Möglichkeit, dies und die anderen Seiten von selbst ganz nett zu machen: 

box-shadow: 0 5px 5px -5px #333;

https://codepen.io/zeckdude/pen/oxywmm

0
David Daudelin

Es ist besser, den Schatten nachzuschlagen: 

.header{
    -webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}

dieser Code wird derzeit in stackoverflow web verwendet.

0
Kamlesh

Wenn Ihr Hintergrund fest ist (oder Sie ihn mit CSS reproduzieren können), können Sie den linearen Verlauf auf diese Weise verwenden:

div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}
<div>
<p>Foobar</p>
<p>test</p>
</div>

Dies erzeugt einen 5px-Farbverlauf am unteren Rand des Elements, von Schwarz bei 30% Deckkraft bis vollständig transparent. Der Rest des Elements hat weißen Hintergrund. Wenn Sie die letzten beiden Farbstopps des linearen Farbverlaufs ändern, können Sie den Hintergrund natürlich vollständig transparent machen.

0
Tibo