html - CSS3/HTML5でボックスの影が不均一？

Question

Web サイトに不均一な影の効果を作成しようとしています。以下の例を参照して、達成する必要があります。

残念ながら、CSS3 でこれを行うことはできないと思います。私の知る限り、box-shadow プロパティは、均等に広がる影を作成するためにのみ使用できます。

ただし、CSS3/HTML5 に関する私の知識はあまりよくないので、回避したい画像/余分な div/相対および絶対配置に頼らずにこれを達成する方法を誰かが知っているかどうか疑問に思っていましたか?

Answer 1

これは私があなたの画像プレビューに最も近いものです。これらを配置された相対 div でラップし、それに応じて位置を設定できます

デモ

HTML

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

CSS

.container {
    width: 300px;
    height: 200px;
    margin: 50px;
    background-color: #eeeeee;
    z-index: 1;
}


.shadow {
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -o-transform: rotate(2deg); /* Opera */
    -moz-transform: rotate(2deg); /* Firefox */
    box-shadow: 0 6px 16px -6px black;
    height: 20px;
    width: 300px;
    position: absolute;
    top: 225px;
    z-index: -1;
    left: 50px;
}

Answer 2

私が思いついた最善の方法は、divの後ろに疑似要素を配置することでした:

div::after{
    content:"";
    display:block;
    transform:rotate(5deg);
    box-shadow:1px 5px 50px #444;
    z-index:-1;
}​

デモ

値を少しいじって、元の値にできるだけ近づけたいと思います。

Answer 3

はい、いくつかのプロパティでできます。すなわち:

html:

<div class="main">
  <div class="shadow-phantom">
  </div>
</div>​

CSS:

.main {
  width:100px;
  height:100px;
  background-color:#e1e1e1;
  margin:10px auto;
}  


.shadow-phantom {
 -webkit-border-radius: 12px 110px 20px 25px;
 border-radius: 12px 110px 20px 25px;
 margin: -4px 0px 0px -0px;
 -moz-background-clip: padding; 
 -webkit-background-clip: padding-box; background-clip: padding-box;
 -webkit-box-shadow: 7px 7px 10px 0px #AAA; 
      box-shadow: 7px 7px 10px 0px #AAA; 
    width:90px;
  height:100px;
  position:absolute;
  z-index:-1;

  -webkit-transform: rotate(5.5deg);  
 -moz-transform: rotate(5.5deg);  
  -ms-transform: rotate(5.5deg);  
   -o-transform: rotate(5.5deg);  
      transform: rotate(5.5deg); 
  }​

このフィドルをチェックして、動作を確認してください：http://jsfiddle.net/wandarkaf/MKV4Q/