[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!

公開日: : 最終更新日:2014/08/08 CSS, Web制作

名称未設定-1

寒くなってきて動きが鈍い僕です。こんにちわ。

さて、タイトルの件なのですが、たまに見かけますよね。上の画像のようなの。

平らなところに置いた紙にあんな影が付くはずもなく、紙が歪んでるのか置いたところが湾曲しているのか
って見ていて思うのですが、これを使って見ようと色々やったわけです。

上のやつは、コリスさんのところでも紹介されているやつです。

[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ

サンプルもあるし、まー簡単でしょって感じで始めたわけですが・・・・。

 

出来ない・・・。
影さんどこ?状態。

sample

 

それがこれです。

z-indexを変更してみたり、いろいろやってみて原因がわかりました。

背景色 or 背景画像

bodyに背景色は問題なく、その上にこのふわっとさんがある場合は全く問題ないですが
body > div となっていて、この中にある場合、divに背景色などが付いていると、そのdivの下に影が入ってしまい
表示されていない状態になってしまいます。

z-indexが全く機能していない事も気になりますが、相当シンプルなサイトじゃないと使い道がないなと結論が出ました。

回避策として、影のみのPNG画像を:afterでつけました。
すんなり出来てよかった。

ad

関連記事

[CSS] メディアクエリ(Media Queries)を考える

Media Queriesとは Media Queriesとは、画面環境に応じてCSSの適用範囲を

記事を読む

[Dreamweaver] 便利な検索&置換

Dreamweaverの検索&置換は、便利な機能が満載! サイトを制作する上で厄介になってくるのが

記事を読む

[Dreamweaver] テンプレート機能初級編!

まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー

記事を読む

[CSS] ベンダープレフィックスはどこまで必要か?

各ブラウザが独自に先行実装しているCSS3 CSS3が現在、各ブラウザでも対応状況が進み、だいぶ使

記事を読む

[WordPress] 自作プラグインの設定など

プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて

記事を読む

[jQuery] 背景画像を画面いっぱいにするプラグイン

背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため

記事を読む

[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint

FocusPoint FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryの

記事を読む

[CSS] 複数のbackground-imageの設定方法

マルチBackground-imageを使ってみる CSS3では、背景画像を指定する際に複数の画像

記事を読む

[Dreamweaver] オプション領域を極める!テンプレート上級編

オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹

記事を読む

no image

[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素

さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑