web-dev-qa-db-ja.com

ボックスの影が特定の側に表示されないようにする

ぼかしの値に関係なく、シャドウが必要な側にのみ表示されるcssボックスシャドウを作成する方法はありますか？

たとえば、左側と右側に影を付け、上部または下部に影を付けないdivを作成する場合などです。 divは絶対的に配置されるわけではなく、高さはコンテンツによって決まります。

-編集-

@ricebowl：回答ありがとうございます。多分あなたはあなたの解決策への私の返信で述べられた問題を修正するための完全な解決策の作成を手伝うことができます...私のページ設定は次のとおりです：

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="clearfooter"></div>
</div>
<div id="footer"></div>

そして、このようなCSS：

#container {width:960px; min-height:100%; margin:0px auto -32px auto; 
       position:relative; padding:0px; background-color:#e6e6e6; 
       -moz-box-shadow: -3px 0px 5px rgba(0,0,0,.8), 
       3px 0px 5px rgba(0,0,0,.8);}
#header   {height:106px; position:relative;}
#content   {position:relative;}
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;}
#footer  {height:32px; padding:0px; position:relative; width:960px; margin:0px 
           auto 0px auto;}
cssshadow
37
Jason Turner

私の関連する質問で述べたように、この問題の解決策は非常にあいまいであるか、現在の技術では不可能です。これはWebデザインの一般的なテーマであるため、これを達成する方法はありません。

それが唯一の正気な解決策であると思われるので、私はpngの影を使用することに頼りました。

ご提案いただきありがとうございます。

1
Jason Turner

定義できる4番目の距離は、スプレッドオフセットと呼ばれ、シャドウを4辺すべてに出入りさせます。したがって、ブラー距離の負の値に設定すると、ブラーがシャドウを外側に拡張するのと同じ距離だけシャドウを内側にシフトし、シャドウを効果的に隠します。もちろん、これにより、表示したい側のシャドウが内側にシフトします。これを元に戻すには、ぼかし距離によるオフセットを大きくする必要があります。つまり.

box-shadow: (horizontal + blur) 0px (blur) (-blur) color;

だからあなたの例では：

box-shadow: -8px 0px 5px -5px rgba(0,0,0,.8), 8px 0px 5px -5px rgba(0,0,0,.8);
47
Michael

また、clip：rect（0px、210px、200px、-10px）;を使用することもできます。

悲しいことに、私はそれを柔軟なサイズのボックスで動作させる方法を見つけることができませんでした。

私はよくこれを、サイドとボトムにのみシャドウが必要なドロップダウンメニューに使用します。その場合は、右と下のクリップの値を、たとえば

クリップ：rect（0px、1000px、1000px、-10px）;/*ボックスシャドウの上部を切り取ります* /

#box{
    box-shadow:             0px 0px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:     0px 0px 10px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
    clip:rect(0px, 210px, 200px, -10px); /* Clip the top and bottom of the box-shadow off */
    width:200px;
    height: 200px;
    position: absolute;
    top:50px;
    left:50px;
    background:#eee;
}
7
Alex

ありますが、それはかなり壊れやすいです。

次のxhtmlを使用します。

<div id="wrap">

 <div id="content">

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales justo nec mauris aliquam vitae feugiat magna congue. Morbi dignissim volutpat dui id porttitor. Donec auctor feugiat dolor, at varius magna rhoncus sed. Vivamus a odio urna, iaculis dignissim lectus. Integer aliquam felis eu sapien vestibulum ornare. Vivamus nec euismod sapien. Mauris quis eros ligula, sed pulvinar sem. Aenean sodales tempor malesuada. Aliquam erat volutpat. Aenean vel eros velit, et porttitor elit. Phasellus volutpat blandit quam eu fringilla. Integer ornare convallis tincidunt. Suspendisse commodo iaculis est vulputate volutpat. Donec at massa arcu. Sed sit amet commodo mauris. Aliquam erat volutpat. Integer eu augue vel erat euismod volutpat eu vel massa. Curabitur id erat vitae nisi imperdiet scelerisque id ut arcu. Quisque commodo dolor vitae erat imperdiet consectetur.</p>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales justo nec mauris aliquam vitae feugiat magna congue. Morbi dignissim volutpat dui id porttitor. Donec auctor feugiat dolor, at varius magna rhoncus sed. Vivamus a odio urna, iaculis dignissim lectus. Integer aliquam felis eu sapien vestibulum ornare. Vivamus nec euismod sapien. Mauris quis eros ligula, sed pulvinar sem. Aenean sodales tempor malesuada. Aliquam erat volutpat. Aenean vel eros velit, et porttitor elit. Phasellus volutpat blandit quam eu fringilla. Integer ornare convallis tincidunt. Suspendisse commodo iaculis est vulputate volutpat. Donec at massa arcu. Sed sit amet commodo mauris. Aliquam erat volutpat. Integer eu augue vel erat euismod volutpat eu vel massa. Curabitur id erat vitae nisi imperdiet scelerisque id ut arcu. Quisque commodo dolor vitae erat imperdiet consectetur.</p>

 </div>

</div>

そして次のCSS：

#wrap {width: 70%;
 margin: 1em auto;
 overflow: hidden;
 overflow-x: visible;
 }

#content
 {width: 90%;
 margin: 0 auto;
 -moz-box-shadow: 0 0 1em #ccc;
 -webkit-box-shadow: 0 0 1em #ccc;
 }

#content p
 {overflow-y: hidden;
 padding: 0.5em 0;
 }

（ここにあるライブデモ： http://davidrhysthomas.co.uk/so/shadows.html 。）

含まれる要素（特に<p>要素、特にpaddingを代わりに使用した理由）にマージンを追加すると、脆弱性が忍び寄ります。しかし、ほとんどの場合、-moz-box-shadow（および/または-webkit-box-shadow）を#content divに適用し、#wrap divを使用してシャドウをクリップします。overflow-y: hidden;を使用すると、もちろん、overflow-yを尊重するブラウザーの数により、さらに脆弱になります。

一方、box-shadowを解釈するブラウザは、overflow-yを適切に処理します。

6
David says reinstate Monica

これを行う方法は、オーバーフローが「非表示」に設定されているdivの下に影付きのボックスを配置することです。たとえば、左側、上部、右側にのみ表示されるボックスの周りに影を作成するには、次のようにします。

CSS：

#container {
    height: 101px;
    overflow: hidden;
    padding: 5px 5px 0;
    width: 105px;
}
#shadow-box {
   border:1px solid #aaa;
   width:100px;
   height:100px;
   box-shadow:0 0 4px 1px #666;
}

HTML：

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

表示：

enter image description here

#containerのパディングとサイズを調整して、ニーズに適したクリップにすることができます。この例では、＃shadow-boxの下枠をクリッピングしています。

4
Redtopia

希望する効果を正確に生成する2つの可能な解決策があります。一部のエッジに「通常の」ボックスシャドウがあり、他のエッジには何もありません。これと他のS.O.にリストされているソリューションの多くほとんどの人がきれいなカットオフを望んでいると私が思うとき、質問の結果、影がなくなるはずのEdgeの近くにあるときに「散逸」する影が生じます。

ただし、どちらのソリューションにも注意点があります。

解決策1：クリップパス（実験的）

部分的なサポートのみを備えた実験的テクノロジを使用する場合は、 _clip-path_ property 。を使用できます。

あなたのケースでは、ピクセル値が問題のエッジから計算されるclip-path: inset(px px px px);を使用します（以下を参照）。

_#container {
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    clip-path: inset(0px -5px 0px -5px);
}
_

これは問題のdivを次の場所でクリップします：

  • 上から0ピクセル
  • 右端の外側に5ピクセル（影を含む）
  • 下から0ピクセル
  • 左エッジの外側に5ピクセル（影を含める）

ピクセル値の間にコンマは必要ないことに注意してください。

絶対配置は必要なく、divのサイズは柔軟にできます。

解決策2：クリップ（非推奨）

If：

  1. 問題のdivに_position: absolute_を設定してもかまいません
  2. そしてdivの次元を知っている
  3. またはdivのサイズはわかりませんが、上部および/または左側の影のみを削除してもかまいません

...deprecatedclip property を使用できます。

ピクセル値は左上から計算されるclip: rect(px, px, px, px);を使用する必要があります。次のように使用して、上部のボックスの影を切り取り、下部と側面はそのままにしておきます。

_#container {
    position: absolute;
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    width: 100px;
    height: 100px;
    clip: rect(0px, 105px, 100px, -5px);
}
_

上記は、5pxの左と右のボックスシャドウを残しながら、上部と下部のボックスシャドウをクリップします。 divのサイズがわかっている必要があることに注意してください。

divのサイズがわからない場合、このメソッドはclip: rect(0, 3000px, 3000px, 0);のようなものを使用して上部と左側のシャドウをクリップする場合にのみ機能します。 divを任意のサイズにするための右と下の値）。

4
Luke

私は常に、隣接する側面への少しの裏抜けがあり、より高いぼかし値でより明白になると思います。シャドウを表示したい側でぼかしを低くし、オフセットを高くすることで、知覚される裏写りをオフセットできます。たとえば、これは側面に目立つ影を作成し、上部と下部にほとんど見えない影を作成します。

box-shadow: #888 3px 0px 2px, #888 -3px 0px 2px;
0
Jimmy Cuadra