0

次のcssを使用して紙の効果の影を作成したいのですが、このdivの中に3つのdivがあり、並べて配置する必要があります。floatを使用してdivを並べて作成しますが、これにより、親のdivの高さが内部コンテンツよりも小さくなります。clear：bothとoverflow：hiddenを試して、コンテンツに対する高さを調整する問題を修正しましたが、これによりシャドウ効果が削除されます。

CSS

.boxcontainer {
   position:relative;
   width:90%;
}

.boxcontainer:before,
.boxcontainer:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}

.boxcontainer:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }

HTML

<div id="paperbox" class="boxcontainer">
    <img class="mafacemobile" src="/images/maface.jpeg" alt="ma face" width="183px" height="183px">
    <div id="textwrapper">
    <h1>
    FILLING MORE TEX
        </h1>
<div id="icons"
<img...>
        </div>
</div>
</div>
4

2 に答える 2

1

あなたが提供した最小限のコードのために、私はあなたが最終結果について何を考えていたかを100％確信していませんでしたが、うまくいけばこれは近いです！

動作するモデルについては私のペンをチェックしてください：http：//codepen.io/gnowland/pen/crGtE

...そしてこれが完成したコードです：

HTML

<div id="paperbox" class="boxcontainer">
  <div class="boxinner">
    <img style="-webkit-user-select: none" src="http://placehold.it/183x183" class="mafacemobile" alt="ma face" width="183px" height="183px">
    <div id="textwrapper">
      <h1>FILLING MORE TEXT</h1>
      <div id="icons"><img style="-webkit-user-select: none" src="http://placehold.it/50"></div>
    </div>
  </div>
</div>

CSS

.boxcontainer {
  margin: 10px;
  display: inline-block;
  position: relative;
  background-color: #fff;
  z-index: -1;
}
.boxcontainer:before {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  background-color: #fff;
  -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  -o-transform:rotate(-3deg);
  transform:rotate(-3deg);
}
.boxcontainer:after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  background-color: #fff;
  -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform:rotate(3deg);
  -moz-transform:rotate(3deg);
  -o-transform:rotate(3deg);
  transform:rotate(3deg);
}

.boxinner{
  position: relative;
  padding: 20px;
  z-index: 1;
 }

.boxinner > * {
  /* NOTE: This is just for demo, utilize the exact selectors in your code */
  display: inline-block;
  padding: 2px
 }

あなた.boxcontainerをラッパーとして使用し、コンテンツを保持するための内部div（.boxinner）を追加して、コンテンツを埋めることができるようにしました。

主な追加はを使用してdisplay: inline-blockいました。そのプロパティに親しみを持ってください、それは素晴らしいです。

codepenで私のコードを試してみて、フォローアップの質問があれば教えてください。

これがあなたのためにそれを解決したことを願っています！:-)

編集：私はあなたの元の質問が7ヶ月前のものであることに気づきました...あなたはおそらくすでにそれを理解しているでしょうが、うまくいけばこれは他の誰かを助けるでしょう。

于 2014-10-10T00:16:30.143 に答える
0

に追加position:relativeしてみてください.boxcontainer

CSS.boxcontainerとその内容も提供していただけますか？また、どのコンテナ.drop-shadowに適用されていますか？

jsfiddleを設定することをお勧めします

于 2013-03-11T17:52:04.340 に答える