「紙がめくれた効果」というのがあって、右下にナナメの影を入れることで「紙の右下が持ち上がっているように見える」というものです。
「Pz-HatenaBlogCard」とか「Pz-LinkCard」にこの効果を実装したかったのですが、これがなかなか厄介でした。
CSS3のbox-shadowを使ってdiv要素に影をつけ、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートを紹介します。
[link url=”http://coliss.com/articles/build-websites/operation/css/css3-box-shadows-effects-by-paulund.html”]
自分でもHTMLとCSSのファイルをローカルで用意して実験してみると、ちゃんと右下に影ができるのですが、いざWordPress上でやってみると「背景より下」に影が表示されてしまっているようです。
z-index をあれこれいじってみても表示されません。
というか、z-index を0とか1とかにすると、本体のボックスそのものよりも上に影が表示されてしまいます。
テーマの背景をいじってみるとちゃんと影は表示されるのですが、背景が無いのではカードの見栄えどうこうでは無いですね(^-^;
とりあえず、諦めていたのですが。
もう一度チャレンジです。
「ボックスの上に影が出ちゃうなら、その上にもうひとつボックス置けばいいんじゃ？Σ(ﾟロﾟ)oﾞ」
とは思っていたので、それをやってみます。
※最初はHTMLで直接書いていたのですが、ビジュアルエディタで編集するとHTMLタグが消えちゃうので画像にしました。
「できたっΣ(ﾟロﾟ)oﾞ」
外側を class=”box1″ にして position: relative の影部分が飛んでいかないように囲っています。 class=”box2″ が影を作るための空っぽの div 。一番内側が class=”box3″ 、枠付けて色塗って、z-index を高くしているので、影よりも上位に表示されています。
紙がめくれた効果
[css decode=”true”].box1 {
width: 500px;
margin: 16px;
}
.box2 {
position:relative;
}
.box2::after {
position:absolute;
z-index:0;
content:””;height:10px;width:60%;
right:12px;
bottom:14px;
left:auto;transform:skew(3deg) rotate(3deg);
-webkit-transform:skew(3deg) rotate(3deg);
-moz-transform:skew(3deg) rotate(3deg);
box-shadow:0 16px 16px rgba(0,0,0,1);
-webkit-box-shadow:0 16px 16px rgba(0,0,0,1);
-moz-box-shadow:0 16px 16px rgba(0,0,0,1);
}
.box3 {
position:relative;
z-index:1;
height: 150px;
padding: 8px;
border:1px solid #000;
background-color: #fff;
box-shadow:0px 2px 6px rgba(0, 0, 0, 0.8) , 0px 0px 16px rgba(0, 0, 0, 0.1) inset;
}[/css]
でも、影付けたいがために、無駄に <div>～</div> が増えちゃいます(^-^;
ただでさえ、無駄な <div>～</div> が多くて見直さないと…と思っていたのに、もうひとつ増やすのもちょっと抵抗があります。(^-^;
それと、一番外側の div で width と margin を指定して、一番内側の div で height と padding を指定して…という感じになってしまって、なんかもう、普通に CSS がごちゃごちゃになりそうです。
やっぱり、「WordPress」で「紙がめくれた効果」は無理なのかなぁ(^-^;
と思っていたところに、ピンポイントな記事が！Σ(ﾟロﾟ)oﾞ
記事「［CSS］box-shadowを使って洗練されたエフェクトを加える二つのテクニック | コリス」等において、紙がめくれたようにするためのＣＳＳが紹介されていますが、私の認識だと、ほとんどのテーマでは適用できません。
[link url=”https://comemo508.wordpress.com/2012/12/23/%E7%B4%99%E3%81%8C%E3%82%81%E3%81%8F%E3%82%8C%E3%81%9F%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8Bcss%E3%82%92-wordpress-com-%E3%81%AE%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AB%E9%81%A9%E7%94%A8%E3%81%99/”]
そうそう、「ほとんどのテーマでは適用できません」、そのまんまの認識でした。
そして、「親要素に『z-index:1;position:relative;』を追加すれば適用できるように」と書いてありました。
ここでの「親要素」っていうのは、つまりは記事が表示される領域、自分が「背景」と呼んでいたところです。
テーマ「Twenty Eleven」を使っていたら .entry-content と .entry-summary に position: relative; z-index: 1; を与えて、うまく表示されたようです。
んー、これをなるべく開く適用されるように…こんな感じにしてみます。
[css]article {
position: relative;
z-index: 1;
}[/css]
おお、この状態だと、無駄に影用の div と、カード表示用の div とか用意しなくてもちゃんと表示されました！Σ(ﾟロﾟ)oﾞ
というわけで、定型書式「紙がめくれた効果」を選んだときには、 article の z-index をいじるように変更しました。
定型書式「テープと紙めくれ」も追加しました。
テーマによっては表示に不具合が出る場合があります。その場合、「紙めくれ」とは組み合わせられません。
次回のバージョンアップで「Pz-LinkCard」に実装します。
では(^-^)o
コメント