[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
寒くなってきて動きが鈍い僕です。こんにちわ。
さて、タイトルの件なのですが、たまに見かけますよね。上の画像のようなの。
平らなところに置いた紙にあんな影が付くはずもなく、紙が歪んでるのか置いたところが湾曲しているのか
って見ていて思うのですが、これを使って見ようと色々やったわけです。
上のやつは、コリスさんのところでも紹介されているやつです。
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
サンプルもあるし、まー簡単でしょって感じで始めたわけですが・・・・。
出来ない・・・。
影さんどこ?状態。
それがこれです。
z-indexを変更してみたり、いろいろやってみて原因がわかりました。
背景色 or 背景画像
bodyに背景色は問題なく、その上にこのふわっとさんがある場合は全く問題ないですが
body > div となっていて、この中にある場合、divに背景色などが付いていると、そのdivの下に影が入ってしまい
表示されていない状態になってしまいます。
z-indexが全く機能していない事も気になりますが、相当シンプルなサイトじゃないと使い道がないなと結論が出ました。
回避策として、影のみのPNG画像を:afterでつけました。
すんなり出来てよかった。
ad
関連記事
-
-
[Dreamweaver] テンプレート機能を使う!初級〜中級編
まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。
-
-
[jQuery] 背景画像を画面いっぱいにするプラグイン
背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため
-
-
[CSS] ベンダープレフィックスはどこまで必要か?
各ブラウザが独自に先行実装しているCSS3 CSS3が現在、各ブラウザでも対応状況が進み、だいぶ使
-
-
[CSS] メディアクエリ(Media Queries)を考える
Media Queriesとは Media Queriesとは、画面環境に応じてCSSの適用範囲を
-
-
[WordPress] 管理画面にテーブル(WP_List_Table)を表示する
WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを
-
-
[jQuery]背景画像にぼかしを入れるプラグイン
Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第2回]
忙しくて忘れてました。僕です。 さて、今回はもうちょっと見栄えもよくしたいなーなんて考
-
-
[CSS] animationを使ってみる!
色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色
-
-
[Dreamweaver] コーディングを早くする5つの方法
コーディングは、早くなる! 普段、Dreamweaverを使っている人で、SassやZenコーディ
-
-
[HTML]デザインは、やはり大切だった!
デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ