2024年06月12日

紙にうまく陰が付けられない(1)

 数日前から、WordPressのサイトで、「紙に陰」の効果を出そうとしているのですが、うまくいきません。
 単純な、直線的なものならcssでshadow指定すればいいのですが、私がやりたいのはこういうもの。

紙に陰01.jpg

 定番のやり方があって、紙のレイヤーの背後に,陰を作るための、いわば紙片を斜めに置いて陰だけを覗かせる、というものです。

紙に陰02.jpg

 黄色い「紙片」をz-index;-1で背後に持って行けばいいわけです。
 ところが、

紙に陰03.jpg

こうなっちゃうわけです。つまり、「紙片」が「紙」のすぐ後ろではなく、メインカラムの後ろにまで行ってしまうわけです。
 「紙」を指定する
<div>...</div>
を入れ子にして、
<div style="z-index:100;">
  <div>...</div>
</div>
とすることで、上層にもってきても紙片は最下層と思われるメインカラムの背後に行ってしまうのです。

 どうもこの現象が、テーマにLuxeritasを使ったときだけの現象と分かりました。

 「紙」のサイズが固定ならば、別の「紙」を覆い被せればいいのですが、これでは、紙に好きな数の文字を入れることができません。

 解決方法はあるのでしょうか


posted by kewpie at 22:00| Comment(0) | TrackBack(0) | WordPress
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/190939363
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック