[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!
寒くなってきて動きが鈍い僕です。こんにちわ。
さて、タイトルの件なのですが、たまに見かけますよね。上の画像のようなの。
平らなところに置いた紙にあんな影が付くはずもなく、紙が歪んでるのか置いたところが湾曲しているのか
って見ていて思うのですが、これを使って見ようと色々やったわけです。
上のやつは、コリスさんのところでも紹介されているやつです。
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
サンプルもあるし、まー簡単でしょって感じで始めたわけですが・・・・。
出来ない・・・。
影さんどこ?状態。
それがこれです。
z-indexを変更してみたり、いろいろやってみて原因がわかりました。
背景色 or 背景画像
bodyに背景色は問題なく、その上にこのふわっとさんがある場合は全く問題ないですが
body > div となっていて、この中にある場合、divに背景色などが付いていると、そのdivの下に影が入ってしまい
表示されていない状態になってしまいます。
z-indexが全く機能していない事も気になりますが、相当シンプルなサイトじゃないと使い道がないなと結論が出ました。
回避策として、影のみのPNG画像を:afterでつけました。
すんなり出来てよかった。
ad
関連記事
-
-
[jQuery] OSX風のスクロールバーにするプラグイン!
trackpad-scroll-emulator trackpad-scroll-emulator
-
-
[Dreamweaver] テンプレート機能初級編!
まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー
-
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると
-
-
[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン
rollerblade-js Rollerbladeを使えば、Webサイトに360°回転させてプロ
-
-
[CSS] CSSで作るリストのアイコン
CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現
-
-
[Dreamweaver] 便利な検索&置換
Dreamweaverの検索&置換は、便利な機能が満載! サイトを制作する上で厄介になってくるのが
-
-
[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)
いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に
-
-
[jQuery] FlickerPlateを紹介します。
かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い
-
-
[HTML]デザインは、やはり大切だった!
デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ
-
-
[Dreamweaver] サイトタイトルを入力する枠を広げる!
デフォルトのままじゃ、狭い! DreamWeaverのタイトルを入力する枠があると思いますが、これ