wake-up-neo.com

Wie bekomme ich Boxschatten nur auf der linken und rechten Seite?

Jede Möglichkeit, Box-Schatten auf der linken und rechten (horizontalen?) Seite nur ohne Hacks oder Bilder zu erhalten. Ich benutze:

box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);

Aber es gibt überall Schatten.

Ich habe keine Grenzen um die Elemente.

195
Jawad

HINWEIS: Ich schlage vor, @ Hamishs Antwort unten zu überprüfen; es beinhaltet nicht die unvollständige "Maskierung" in der hier beschriebenen Lösung.


Sie können mit mehreren Box-Schatten näher kommen; eine für jede Seite

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

Bearbeiten

Fügen Sie zwei weitere Box-Schatten für den oberen und unteren oberen Bereich hinzu, um das Durchlaufen zu verdecken.

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/LE6Lz/

246
deefour

Ich weiß, dass dies eine späte Ergänzung ist, aber ich war nicht mit dem abgerundeten oberen und unteren Rand des Schattens in Deefours Lösung zufrieden, die meine eigene geschaffen hat.

Siehe Demo hier

Einfügung box-shadow; erzeugt einen schönen gleichförmigen Schatten, wobei die Ober- und Unterseite abgeschnitten sind:

box-shadow: -15px 0 15px -15px inset;

Um diesen Effekt auf den Seiten Ihres Elements zu verwenden, erstellen Sie zwei Pseudoelemente :before und :after, die sich absolut an den Seiten des ursprünglichen Elements befinden.

div {
 position: relative; 
}
div:before {
  box-shadow: -15px 0 15px -15px inset;
  content: " ";
  height: 100%;
  left: -15px;
  position: absolute;
  top: 0;
  width: 15px;
}

etc...
157
Hamish

Versuchen Sie das, es funktioniert für mich:

    box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
24
krishna kinnera

Klassischer Ansatz: Negativ Spread

CSS box-shadow verwendet 4 Parameter: h-shadow, v-shadow, blur, spread:

box-shadow: 10px 0 8px -8px black;

Der v-shadow (verical shadow) ist auf 0 gesetzt.

Der Parameter blur fügt den Verlaufseffekt hinzu, fügt jedoch auch einen kleinen Schatten an den vertikalen Rändern hinzu (dem, den wir entfernen möchten).

Negativ spread reduziert den Schatten an allen Rändern: Sie können damit spielen, indem Sie versuchen, diesen kleinen vertikalen Schatten zu entfernen, ohne den oberen Rand der Seiten zu sehr zu beeinflussen (es ist einfacher für kleine Schatten, 5 bis 10 Pixel) .)

Hier ein Fiddle Beispiel.


Zweiter Ansatz: Absolutes div auf der Seite

Fügen Sie Ihrem Element ein leeres div hinzu und gestalten Sie es mit absoluter Positionierung so, dass es den Elementinhalt nicht beeinflusst.

Hier die fiddle mit einem Beispiel für den linken Schatten.

<div id="container">
  <div class="shadow"></div>
</div>

.shadow{
    position:absolute;
    height: 100%;
    width: 4px;
    left:0px;
    top:0px;
    box-shadow: -4px 0 3px black;
}

Drittens: Schatten maskieren

Wenn Sie einen festen Hintergrund haben, können Sie den Seitenschatteneffekt mit zwei Maskierungsschatten ausblenden, die dieselbe Hintergrundfarbe und Unschärfe = 0 haben. Beispiel:

box-shadow: 
    0 -6px white,          // Top Masking Shadow
    0 6px white,           // Bottom Masking Shadow
    7px 0 4px -3px black,  // Left-shadow
    -7px 0 4px -3px black; // Right-shadow

Ich habe wieder einen negativen Spread (-3px) zum schwarzen Schatten hinzugefügt, damit er sich nicht über die Ecken erstreckt.

Hier die Geige .

22
T30

Dies funktioniert gut für alle Browser:

-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
4
Jibber

Ein anderer Weg ist mit: overflow-y:hidden am übergeordneten Element mit Auffüllung.

#wrap {
    overflow-y: hidden;
    padding: 0 10px;
}
#wrap > div {
    width: 100px;
    height: 100px;
    box-shadow: 0 0 20px -5px red;
}

http://jsfiddle.net/qqx221c8/

4
John Magnolia

DEMO

Sie müssen den mehrfachen box-shadow; verwenden. Inset-Eigenschaft macht es schön und innen

div {
    box-shadow: inset 0 12px  15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px  8px -4px rgba(31, 73, 125, 0.8);
    width: 100px;
    height: 100px;
    margin: 50px;
    background: white;
}
3

Eine andere Idee könnte sein, ein dunkles verschwommenes Pseudoelement mit Transparenz zu erstellen, um Schatten nachzuahmen. Machen Sie es mit etwas weniger Höhe und mehr Breite, z. 

0
Garavani

In einigen Situationen können Sie den Schatten durch einen anderen Container ausblenden. Wenn sich zum Beispiel ein DIV oberhalb und unterhalb des DIV mit dem Schatten befindet, können Sie position: relative; z-index: 1; für die umgebenden DIVs verwenden.

0
NateS

Schöner INSET SHADOW AUF LINKEN UND RECHTEN SEITEN FÜR DIVS, BILDER OR INHALT

Verwenden Sie diese Option, um einen Nice-Schatten auf der rechten und linken Seite in Bildern oder anderen Inhalten zu erhalten 

*** Der Z-Index: -1 führt einen Nizza-Trick aus, wenn Bilder oder innere Objekte mit Einfügungen angezeigt werden

<html>
<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>

<style>

.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}

.innercontent{
z-index:-1
}
</style>
</html>

Nur für horizontale Bereiche können Sie den Box-Schatten mit einem Überlauf für das übergeordnete div ausgeben:

<div class="parent">
  <div class="box-shadow">content</div>
</div>

.parent{
  overflow:hidden;
}
.box-shadow{
  box-shadow: box-shadow: 0 5px 5px 0 #000;
}
0

Sie können 1 Div verwenden, um den Schatten zu löschen:

.yourdiv{
    position:relative;
    width:400px;
    height:400px;
    left:10px;
    top:40px;
    background-color:white;
    box-shadow: 0px 0px 1px 0.5px #5F5F5F;

}
.erase{
    position:absolute;
    width:100%;
    top:50%;
    height:105%;
    transform:translate(0%,-50%);
    background-color:white;
}

Sie können mit "height:%;" spielen. und "width:%;" zu löschen, welchen Schatten Sie wollen.

0
user9960993
box-shadow: box-shadow: 0 5px 5px 0 #000;

Es funktioniert auf meiner Seite. Hoffe, es hilft dir.

0
Nitika Chopra