0

単一の視覚的な影を付ける

このHTMLスニペットのように少ない CODE＃1を使用すると、...

<div class="shadowBottom"  style="width: 200px;" >
   ... stuff here ...
</div>

たとえば、HTMLページのDIVセクションにシャドウを簡単に添付できます。

下端の下のCSSシャドウ

少ないコードは、要素の左下隅と右下隅の下にボックスシャドウを追加し、それらを少し回転させます。シャドウを使用z-index=-1すると、ターゲット要素の背後に移動します。したがって、ターゲット要素のすぐ下に表示されるのは一部の影だけです。Évoilà！

確かに、z-index = -1でボックスシャドウ要素を表示しないようにするには、ターゲット要素の背景が不透明である必要があります。

2つの視覚的な影を付ける

非常によく似たコードで、左下隅の左に影ができる可能性があります。

両方のシャドウ効果を組み合わせるには、実際のコンテンツを2つラップする必要がDIVsあります[両方のクラスを同じDIVに適用しても機能しません]。

<div class="shadowLeft" style="width: 200px;">
   <div class="shadowBottom"  style="width: 200px;" >
      ... stuff here ...
   </div>
</div>

このようなレンダリング：

結合された影

実際には、2つのシャドウ効果の間にギャップがあるため、これは私が達成したいことではありません。

質問

ギャブを埋めて、角を曲がったところに均一な影を生成する方法を見るのはとてもうれしいです。このようなもの：

角を曲がった均一な影

コード＃1 [LESS]

.shadowBottom {

    background-color: #FFFFFF;  
    width: 100%;
    position: relative;

}

@shadowRotation: 6deg;
@horizontalOffset: 0px;
@alpha: 0.2;

.shadowBottom:before {

    content: '';

    position: absolute;
    bottom: 10px;
    left: @horizontalOffset;
    z-index: -1;
    width: 100px;
    height: 20px;

    -webkit-box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );
    -moz-box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );
    box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );

    -webkit-transform: rotate( -@shadowRotation );
    -moz-transform: rotate( -@shadowRotation );
    -o-transform: rotate( -@shadowRotation );
    -ms-transform: rotate( -@shadowRotation );
    transform: rotate( -@shadowRotation );

}

.shadowBottom:after {

    content: '';

    position: absolute;
    bottom: 10px;
    right: @horizontalOffset;
    z-index: -1;
    width: 100px;
    height: 20px;

    -webkit-box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );
    -moz-box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );
    box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );

    -webkit-transform: rotate( @shadowRotation );
    -moz-transform: rotate( @shadowRotation );
    -o-transform: rotate( @shadowRotation );
    -ms-transform: rotate( @shadowRotation );
    transform: rotate( @shadowRotation );

}
4

1 に答える 1

0

編集:これに最も近いのはskew、菱形のような図を作成することです:

.shadowBottom{
  position:relative;
  box-shadow: 0 0 6px rgba( 0, 0, 0, 0.2);    
}

.shadowBottom::before, .shadowBottom::after{ 
  content: '';
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: -1;
  width: 50%;
  height: 90%;
  box-shadow: 0px 10px 30px rgba( 0, 0, 0, 0.4);   
  transform: skewX(-10deg) rotate(-4deg); 
               /* ^ skew value should be adjusted to match box w/h */
}

.shadowBottom::after{
  transform: skewX(10deg) rotate(4deg);  
               /* ^ same here */
  left: auto;
  right: 10px;
}

デモ

于 2013-02-24T01:48:18.207 に答える