ラック
Home > ブログ > 記事 > 2015年7月 > box-shadowが効かない

box-shadowが効かない

カテゴリ: ホームページ

ページのコーディングをしていた時に、css3のbox-shadowが表示されない症状に見舞われました。

途中までは表示されていたのですが、いつの間にか表示されなくなっていました…。

なお、現状では完全な解決策は見い出せず、なんとか妥協策をひねり出した状態です。

それでも、「こんな症状があるよ」と書き留めることで、同じ症状に見舞われた方のヒントになれば、と思います。

 

使用していたのは、

にある、付箋を貼ったようなエフェクトを付けるデザインです。

 

htmlコードは以下のような感じ。

<div id="mainContents">
	<div id="entry">
		<h4>Lorem ipsum</h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<h4>Lorem ipsum</h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
</div>

cssはこんな感じ。

#mainContents {
	padding-top: 10%;
	padding-bottom: 1%;
	background: url("<背景画像>") no-repeat center center fixed;
	background-size: cover;
}
#entry {
	margin: 0 auto;
	padding: 10px;
	max-width: 80%;
	box-shadow: 5px 5px 5px rgba(218,218,218,0.4);
	font-size: 14px;
	line-height: 16px;
	text-align: left;
	background-color: rgba(255,255,255,0.75);

}
#entry h4 {
	margin-left: 10px;
	display: inline-block;
	height: 100%;
	line-height: 100%;
	padding: 5px 10px;
	position: relative;
	margin: 10px;
	background: #efefc0;
}
#entry h4:after {
	width: 80%;
	height: 87%;
	content: "";
	position: absolute;
	top: 0;
	right: 2px;
	box-shadow: 0 5px 5px #000; /* ぼかし */
	transform: rotate(3deg); /* 回転 */
	z-index: -1;
}

で、こんな感じのページです。

やっていることとしては、

  1. テキスト表示エリア("entry"のidが付いたdiv)にrgba指定の透過が指定されており、その裏("mainContents"のidが付いたdiv)に背景画像をしている。
  2. この状態で、テキスト表示エリアの中にある付箋(h4)に影が付かない。

という状態です。

 

困ったときはとりあえず検索。

んー…どれも今回の症状とは違うのですよね。ということで検索から答えを得ることはできませんでした。

 

色々弄った結果、どうやらbox-shadowが背景のボックスや画像に隠れているのではないか、という結論に至りました。

しかし、z-indexを色々弄りましたが思うような結果が得られず…。

現状としては、以下の2つを行うことで症状に改善が見られることが分かりました。

  1. 背景画像を消す
  2. テキスト表示エリアの透過をrgba指定からopacityに変更する

このページで、上記2つの場合で影が復活することを確認できると思います。

ただ、一は文字通り背景画像が消えるので論外。二は中のテキストやボックスも透過してしまうので、これもできるならやりたくはないのですが一よりはマシかなぁ…と。

もし上記2つ以外で上手い解決策があればそちらを使いたいです。

タグ: css, html, バグ

 



関連する記事一覧