要素の片側にボックスシャドウを追加するにはどうすればよいですか?


445

一部のblock要素にボックスシャドウを作成する必要がありますが、(たとえば)要素の右側のみに作成します。私はそれを行う方法を用いて、内側の要素をラップすることであるbox-shadowと外側のいずれかにpadding-right及びoverflow:hidden;影の他の三つの辺が見えないように。

これを達成するためのより良い方法はありますか?好きbox-shadow-right

編集:私の意図は、影の垂直部分のみを作成することです。repeat-yルールbackground:url(shadow.png) 100% 0% repeat-yとまったく同じです。


3
cssの限定されたツールをボックスシャドウの観点から考えると、あなたのアプローチはすでに非常に優れていると思います。煩雑すぎず、セマンティクスの面でかなり小さな影響があります。意味のないdivが1つだけです。
Bazzz

ここに素敵なcssサイドシャドウがあります:stackoverflow.com/a/20596554/1491212
Armel Larcier

回答:


567

はい、ボックスシャドウルールのシャドウスプレッドプロパティを使用できます。

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

4番目のプロパティ-2pxは影の広がりです。これを使用して影の広がりを変更し、影が片側だけにあるように見せることができます。

また、これはシャドウ配置ルール10pxを使用してそれを右側に送信し(水平オフセット)0px、要素の下に保ちます(垂直オフセット)。

5px ぼかし半径です:)

ここにあなたのための例


11
わからないことを指摘していただきありがとうございますが、私の意図は影の縦の部分だけを作ることでした。background:url(shadow.png)100%0%repeat-yとまったく同じです。
2011

4
@Tillda回答としてマークする必要があるので、解決策を探している他の人が上に表示されます。私はコメントを読んでこのスタイルを設定する方法をほとんど却下し、回答を受け入れました。
Devin G Rhode

6
これは、影がコーナーで減衰することを意図していない場合に効果的です。私もこの解決策を思いつきましたが、ほとんどの場合(片側の影の場合)影を要素よりも小さくすることは間違っているため、その要素が「意図したものであったとしても」という錯覚を壊しました。隆起」または「3D」。
Steven Lu

1
@ Mr.Alienそのおかげで、box-shadowルールが標準化されたので、プレフィックスを削除しました。
カイル

5
しかし、この影はぼやけがなく、ぼかしを含めて他の部分から出てきます。そして、スプレッドを減らすことでそれを説明すると、それはあなたが実際に望む側で時期尚早に終わります。UGHHHHH
Muhammad

37

編集が簡単な私の自作ソリューション:

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;
}​

デモ:http :
//jsfiddle.net/jDyQt/103


1
どういうわけか最も単純なもののようです-コンテナーのdivだけでなんとなく不満を感じています;)
BananaAcid 2014

1
これが唯一の実際の解決策です。受け入れられた答えは、まだ異なる位置で、影の上下にまだぼやけを持っています。
Jelle Blaauw

これはMicrosoft EdgeやInternet Explorer 11では機能しませんでした。ズームレベルによっては、反対側に少し影が残っていました。他のブラウザでも問題ありませんでした。
サム

stackoverflow.com/a/24220224/238753の回答はこれと同じように機能しましたが、この回答にあるブラウザ互換性の問題はありません
サム

24

最大2つの側面でクリップされた効果を得るには、背景のグラデーションを持つ疑似要素を使用できます。

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));
}

通常はドキュメントを構成する要素の左右に、素敵な影のような効果を追加します。


マークアップを乱雑にすることなく、要素の片側にのみシャドウ効果を追加するため、完璧なソリューションです。
Liquinaut 2015年

1
ネガティブスプレッド法と比較すると、コーナーで収縮しないという利点があります。
ケビンクリストファーヘンリー

3
@BananaAcid必要な人のためにデモを作成しました:jsfiddle.net/jDyQt/1198
zeckdude

いいですね、これはChrome、Safari、Firefox、IE11、およびEdgeで問題なく動作しました
サム

15

:: afterまたは:: before疑似要素を使用してシャドウを追加するだけです。1pxにして、好きな面に配置します。以下はトップの例です。

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>


これはまだ端を越えてこぼれますが、一部の人々が望むものかもしれません
サム

5

これが私の例です:

.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>


4

ここに私がした小さなハックがあります。

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

1.<div class="one_side_shadow"></div>片側のボックスシャドウを作成する要素の真下に作成します(この場合id="element"、下からの片側インセットシャドウが必要です)。

2.次にbox-shadow、負の垂直オフセットを使用して、影を片側に押し上げるレギュラーを作成しました。

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

2

これは簡単な方法かもしれません

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

これを任意のdivに割り当てます


1

以下は、それぞれの側を示すコードペン、または機能するスニペットです。

.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>


0

このサイトは私を助けてくれました:https : //gist.github.com/ocean90/1268328(このサイトでは、この投稿の日付の時点で左右が逆になっていることに注意してください...しかし、期待どおりに動作します)。以下のコードで修正されています。

<!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>


0

私がすることは、影の垂直ブロックを作成し、それを私のブロック要素があるべき場所の隣に配置することです。次に、2つのブロックが別のブロックにラップされます。

<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の例はこちら


0

では、もう一度試してみましょう。疑似要素を使用し、それらの上にシャドウボックスポーパーティを適用します。

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.