1

ここに示すページピール効果を適応させようとしています。私のフィドルはここにあります

私は2つの変更を加えようとしています：

  1. 幅を90％に増やします（800pxあります）
    • これを行うと、ドロップシャドウ効果が台無しになり、シャドウがあるべき場所に空白が表示されます
  2. ページの皮を四隅すべてに置きます。
    • 「shadow-bottomshadow-top」、「shadow-rightshadow-left」などのクラスのさまざまな組み合わせを試しました。

どうすれば両方を達成できますか？

<div class="page-curl shadow-bottom">
    <h2>Bottom shadow, both sides</h2>
    <p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div>
....full code on my jsfiddle link
4

2 に答える 2

2

ここで、意図した効果を使用してデモを作成しました。

編集：元のパーセンテージベースの幅を修正することで可変幅のバグに対応しました。これにより、疑似要素の幅を除くすべての次元に固定値が40％になりました。800px（コンテナの指定された幅）の40％= 320pxです。これは、クリップされたシャドウを解決するためにここで分割します。

もう1つの問題は、元の作成者がシャドウが要素にのみ適用されるようにコードを記述したことです。要素の内部外観のみを管理する.page-curlようにCSSルールを分離しました。.page-curl

改訂されたCSSは、パディング、境界線、背景、幅などのプロパティを持ち込むことなく、シャドウ効果を使用して必要な数の要素を作成できることを意味します。

[class*=shadow] {
    position: relative;
}

[class*=shadow]:before, 
[class*=shadow]:after {
    background: none;
    bottom: 12px;
    -moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
    content: "";
    height: 10px;
    left: 12px;
    position: absolute;
    width: 320px;
    z-index: -1;
    -moz-transform: skew(-4deg) rotate(-4deg);
    -webkit-transform: skew(-4deg) rotate(-4deg);
    transform: skew(-4deg) rotate(-4deg);
}

[class*=shadow]:after {
    -moz-transform: skew(4deg) rotate(4deg);
    -webkit-transform: skew(4deg) rotate(4deg);
    transform: skew(4deg) rotate(4deg);
    left: auto;
    right: 12px;
}

基本的に、このコードは、要素にテキストを含むクラスがある場合、これらと要素shadowを与えることができることを示しています。次に、特定の方向を指示するルールは、クラスを夢中にさせました。::before::after.page-curl

::beforeこの時点では、要素ごとに2つのシャドウに制限されています（1つと1つの要素しか持てません::after）。解決策は、2つのネストされたdivを作成することです。

<div class="container shadow-top-bottom shadow-right">
    <div class="page-curl shadow-top-bottom shadow-left">
    </div>
</div>

したがって、1番目のdivは右側の上部と下部のシャドウを処理し、2番目のdivは左側のシャドウを処理します。

ちなみに、2番目にはすべての.page-curlプロパティがあり.container、1番目のクラスは90％の幅の要件を処理します。

于 2013-03-07T19:46:14.790 に答える
0

ピールシャドウはそれほど高くはありませんが、それでも見栄えがします！次の両方に次の小さな変更を加えると、これが修正されます。

これがそのためのjsFiddleであり、これ がページ上でどのように見えるかです。

.shadow-top-bottom.shadow-left:after {
display: block;
bottom: auto;
top: 20px; /* change from top: 15px; to top: 20px;*/
right: auto;
left: 12px;
-moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);}

.shadow-top-bottom.shadow-right:before {
display: block;
bottom: auto;
top: 20px; /* change from top: 15px; to top: 20px;*/
right: 12px;
left: auto;
-moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);}
于 2013-03-08T09:54:43.860 に答える