Wie kann ich einen Kastenschatten auf einer Seite eines Elements hinzufügen?

445

Ich muss einen Kastenschatten für ein blockElement erstellen , aber nur (zum Beispiel) auf seiner rechten Seite. Ich wickle das innere Element mit box-shadowin ein äußeres mit padding-rightund overflow:hidden;so sind die drei anderen Seiten des Schattens nicht sichtbar.

Gibt es einen besseren Weg, um dies zu erreichen? Wie box-shadow-right?

EDIT : Meine Absicht ist es, nur den vertikalen Teil des Schattens zu erstellen . Genau das Gleiche wie repeat-ydie Regel background:url(shadow.png) 100% 0% repeat-y.

tillda
quelle
3
Angesichts der begrenzten Tools von CSS in Bezug auf Box-Shadows denke ich, dass Ihr Ansatz bereits recht gut ist. Es ist nicht zu unübersichtlich und hat einen relativ geringen Einfluss auf die Semantik: nur ein bedeutungsloses Div.
Bazzz
Hier ist ein schöner CSS-Seitenschatten: stackoverflow.com/a/20596554/1491212
Armel Larcier

Antworten:

567

Ja, Sie können die Shadow Spread-Eigenschaft der Box-Shadow-Regel verwenden:

.myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  box-shadow: 10px 0 5px -2px #888;
}
<div class="myDiv"></div>

Die vierte Eigenschaft dort -2pxist die Schattenausbreitung. Sie können sie verwenden, um die Ausbreitung des Schattens zu ändern, sodass der Schatten nur auf einer Seite angezeigt wird.

Hierbei werden auch die Schattenpositionierungsregeln verwendet, die 10pxnach rechts gesendet werden (horizontaler Versatz) und 0pxunter dem Element bleiben (vertikaler Versatz).

5px ist der Unschärferadius :)

Beispiel für Sie hier .

Kyle
quelle
11
Vielen Dank, dass Sie auf etwas hingewiesen haben, das ich nicht wusste, aber ich wollte nur den vertikalen Teil des Schattens erzeugen . Genau das gleiche, was Hintergrund: url (shadow.png) 100% 0% repeat-y tun würde.
Bis zum
4
@Tillda Sie sollten dies als Antwort markieren, damit es für andere, die nach einer Lösung suchen, oben angezeigt wird. Ich habe diese Methode des Stylings beim Lesen der Kommentare fast abgelehnt und die Antwort akzeptiert.
Devin G Rhode
6
Dies funktioniert hervorragend, wenn Sie nicht beabsichtigen, dass sich der Schatten an den Ecken abschwächt. Ich habe mir diese Lösung auch selbst ausgedacht, aber in den meisten Fällen (für einen Schatten auf einer Seite) ist es falsch, wenn der Schatten kleiner als das Element ist, wodurch die Illusion gebrochen wird (wenn es so beabsichtigt wäre), dass das Element " angehoben "oder" 3D ".
Steven Lu
1
@ Mr.Alien Danke dafür, ich habe gerade das Präfix entfernt, da die box-shadowRegeln standardisiert waren.
Kyle
5
Aber dieser Schatten hat keine Unschärfe, und einschließlich der Unschärfe kommt er aus anderen Teilen heraus. Und wenn Sie dies berücksichtigen, indem Sie den Spread reduzieren, endet er vorzeitig auf der Seite, die Sie tatsächlich wollen. UGHHHHH
Muhammad Umer
37

Meine selbst erstellte Lösung, die einfach zu bearbeiten ist:

HTML:

<div id="anti-shadow-div">
    <div id="shadow-div"></div>
</div>

CSS:

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

#anti-shadow-div{
    margin:20px;
    display:table;
    overflow:hidden;
}​

Demo:
http://jsfiddle.net/jDyQt/103

Puyol
quelle
1
Scheint irgendwie die
direkteste
1
Dies ist die einzige wirkliche Lösung. Die akzeptierte Antwort ist oben und unten im Schatten immer noch unscharf, nur an einer anderen Position.
Jelle Blaauw
In Microsoft Edge oder Internet Explorer 11 hat dies bei mir nicht funktioniert. Auf den anderen Seiten war je nach Zoomstufe immer noch etwas Schatten. Andere Browser waren jedoch in Ordnung.
Sam
Die Antwort unter stackoverflow.com/a/24220224/238753 funktionierte genauso, jedoch ohne die Browserkompatibilitätsprobleme, die diese Antwort hat
Sam
24

Um den abgeschnittenen Effekt auf bis zu zwei Seiten zu erzielen, können Sie Pseudoelemente mit Hintergrundverläufen verwenden.

header::before, main::before, footer::before, header::after, main::after, footer::after {
    display:    block;
    content:    '';
    position:   absolute;
    width:      8px;
    height:     100%;
    top:        0px;
}

header::before, main::before, footer::before {
    left:       -8px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

header::after, main::after, footer::after {
    right:      -8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

fügt links und rechts von den Elementen, aus denen normalerweise ein Dokument besteht, einen schönen schattenartigen Effekt hinzu.

Jacek Kuzemczak
quelle
Perfekte Lösung, da nur einer Seite eines Elements ein Schatteneffekt hinzugefügt wird, ohne das Markup zu überladen.
Liquinaut
1
Gegenüber der Negativspreizmethode hat dies den Vorteil, dass sie an den Ecken nicht schrumpft.
Kevin Christopher Henry
3
@ BananaAcid Ich habe eine Demo für alle erstellt, die sie brauchen
zeckdude
Schön, dass dies in Chrome, Safari, Firefox, IE11 und Edge perfekt funktioniert hat, ohne Nebenwirkungen für mich
Sam
15

Verwenden Sie einfach das Pseudoelement :: after oder :: before, um den Schatten hinzuzufügen. Machen Sie es 1px und positionieren Sie es auf der gewünschten Seite. Unten ist ein Beispiel von oben.

footer {
   margin-top: 50px;
   color: #fff;
   background-color: #009eff;
   text-align: center;
   line-height: 90px;
   position: relative;
}

footer::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}
<footer>top only box shadow</footer>

riegersn
quelle
Dieser läuft immer noch über den Rand hinaus, könnte aber das sein, was manche Leute wollen
Sam
5

Hier ist mein Beispiel:

.box{
        
        width: 400px; 
        height: 80px; 
        background-color: #C9C; 
        text-align: center; 
        font: 20px normal Arial, Helvetica, sans-serif; 
        color: #fff; 
        padding: 100px 0 0 0;
        -webkit-box-shadow: 0 8px 6px -6px black;
           -moz-box-shadow: 0 8px 6px -6px black;
                box-shadow: 0 8px 6px -6px black;
    }
<div class="box">
</div>

Webpixstudio
quelle
4

Hier ist ein kleiner Hack, den ich gemacht habe.

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1. Erstellen Sie <div class="one_side_shadow"></div>rechts unter dem Element, für das ich den einseitigen Feldschatten erstellen möchte (in diesem Fall möchte ich einen einseitigen Einschubschatten, id="element"der von unten kommt).

2. Dann habe ich einen Regular box-shadowmit einem negativen vertikalen Versatz erstellt, um den Schatten nach oben zur Seite zu schieben.

`box-shadow: 0 -8px 20px 2px #DEDEE3;`
atiquratik
quelle
2

Dies könnte ein einfacher Weg sein

border-right : 1px solid #ddd;
height:85px;    
box-shadow : 10px 0px 5px 1px #eaeaea;

Weisen Sie dies einem beliebigen div zu

madhairsilence
quelle
1

Hier ist ein Codepen , der für jede Seite demonstriert werden soll, oder ein funktionierender Ausschnitt:

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box {
  margin: 20px;
  border: 1px solid #ccc;
  font-family: Helvetica Neue, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 2px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 40px;
  line-height: 1.4em;
}

.top {
  box-shadow: 0 -5px 5px -5px #333;
}

.right {
  box-shadow: 5px 0 5px -5px #333;
}

.bottom {
  box-shadow: 0 5px 5px -5px #333;
}

.left {
  box-shadow: -5px 0 5px -5px #333;
}
<div class="boxes">
  <div class="box top">Top Only</div>
  <div class="box right">Right Only</div>
  <div class="box bottom">Bottom Only</div>
  <div class="box left">Left Only</div>
</div>

WURZEL
quelle
0

Diese Seite hat mir geholfen: https://gist.github.com/ocean90/1268328 (Beachten Sie, dass auf dieser Seite links und rechts zum Datum dieses Beitrags vertauscht sind ... aber sie funktionieren wie erwartet). Sie werden im folgenden Code korrigiert.

<!DOCTYPE html>
<html>
    <head>
        <title>Box Shadow</title>

        <style>
            .box {
                height: 150px;
                width: 300px;
                margin: 20px;
                border: 1px solid #ccc;
            }

            .top {
                box-shadow: 0 -5px 5px -5px #333;
            }

            .right {
                box-shadow: 5px 0 5px -5px #333;
            }

            .bottom {
                box-shadow: 0 5px 5px -5px #333;
            }

            .left {
                box-shadow: -5px 0 5px -5px #333;
            }

            .all {
                box-shadow: 0 0 5px #333;
            }
        </style>
    </head>
    <body>
        <div class="box top"></div>
        <div class="box right"></div>
        <div class="box bottom"></div>
        <div class="box left"></div>
        <div class="box all"></div>
    </body>
</html>
ter24
quelle
0
div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}
Ashisha Nautiyal
quelle
0

Ich erstelle einen vertikalen Block für den Schatten und platziere ihn neben der Stelle, an der sich mein Blockelement befinden soll. Die beiden Blöcke werden dann in einen anderen Block eingewickelt:

<div id="wrapper">
    <div id="shadow"></div>  
    <div id="content">CONTENT</div>  
</div>

<style>

div#wrapper {
  width:200px;
  height:258px;      
}

div#wrapper > div#shadow {
  display:inline-block;
  width:1px;
  height:100%;
  box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8)
}

div#wrapper > div#content {
  display:inline-block;
  height:100%;
  vertical-align:top;
}

</style>

jsFiddle Beispiel hier .

jim_kastrin
quelle
0

Ok, hier ist noch ein Versuch. Verwenden von Pseudoelementen und Anwenden des Shadow-Box-Porperty über diese.

html:

<div class="no-relevant-box">
  <div class="div-to-shadow-1"></div>
  <div class="div-to-shadow-2"></div>
</div>

sass:

.div-to-shadow-1, .div-to-shadow-2
  height: 150px
  width: 150px
  overflow: hidden
  transition: all 0.3s ease-in-out
  &::after
    display: block
    content: ''
    position: relative
    top: 0
    left: 100%
    height: 100%
    width: 10px
    border: 1px solid mediumeagreen
    box-shadow:  0px 7px 12px rgba(0,0,0,0.3)
  &:hover
    border: 1px solid dodgerblue
    overflow: visible

https://codepen.io/alex3o0/pen/PrMyNQ

Alex
quelle